任务二十二~Dom、事件

问答部分

一、dom对象的innerText和innerHTML有什么区别？

innerText~是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照由浅到深的顺序拼接其内容；当写入新内容时会覆盖掉其内部所有内容，此时输入的内容为文本格式，即使有HTML标签也会当成文本，如下代码

<div>
    123
    <p>
        456
        <span>789</span>
    </p>
</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.innerText;
    div.innerText = '<a href="#">link</a>';
</script>

输出结果如下图

innerText

innerHTML~返回的是HTML的结构；当写入新内容时也会覆盖掉其内部内容，当有HTML标签时会当成HTML标签处理，如下代码

<div>
    123
    <p>
        456
        <span>789</span>
    </p>
</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.innerHTML;
    div.innerHTML = '<a href="#">link</a>';
</script>

输出结果如下图所示

innerHTML

二、element.children和element.childNodes的区别？

element.children~返回的只是所有元素节点的集合
element.childNodes~返回的是包含当前节点所有子节点的集合，除HTML的元素节点外，还包括Text节点和Comment节点

<div id="content">
    dddd
    <div class="left">
        <p>aaaa</p>
    </div>
    <div class="right">
        <p>bbbbb</p>
    </div>
</div>
<script>
    function $(selector){
        if(selector[0] === "#"){
            return document.querySelector(selector);
        }else{
            return document.querySelectorAll(selector);
        }
    }
    var children = $("#content").children;
    var chiildnodes = $("#content").childNodes;
</script>

三、查询元素有几种常见的方法？

getElementById()~该方法返回匹配指定ID属性的元素节点，只能在document上使用，如果没有发现匹配的节点，则返回null，如下代码

<div id="content">
    <p>paragraph one</p>            
    <p id="p2">paragraph two</p> 
</div>      
<script>
    var content = document.getELementById("content");
    var p2= document.getElementById("p2");
</script>

getElementById

getElementsByClassName()~通过指定类名来选择元素，返回一个类似数组的对象；该方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素;该方法不仅可以在document上使用，也可以在任何元素节点上调用，如下代码

<p>paragraph one</p>
<p id="p2">
    paragraph two
    <a href="#" class="link">link</a>
</p>
<div class="left clearfix">aaaaa</div>
<script>
    var p2 = document.getElementById("p2");
    var link = p2.getElementsByClassName("link");
    var div = document.getElementsByClassName("left clearfix");
</script>

getElementsByClassName

getElementsByTagName()~通过指定标签名来选择元素，返回一个类似数组的对象；该方法不仅可以在document对象上调用，也可以在任何元素节点上调用；注意，该方法会将参数转为小写后才进行搜索，如下代码

<p>paragraph one</p>
<p id="p2">
    paragraph two
    <p class="p3">paragraph three</p>
</p>
<p class="p3">paragraph three</p>
<script>
    var p = document.getElementsByTagName("P");
</script>

getElementsByTagName

querySelector()~返回匹配指定的css选择器的元素节点；如果有多个节点满足匹配条件，则返回第一个匹配的节点；如果没有发现匹配的节点，则返回null；注意：querySelector()无法选中CSS伪元素，如下代码

<div id="content">
    <div class="layout clearfix">aaa</div>
    <p class="big">bbbb</p>
    <p class="big">bbbb</p>
    <p class="big">bbbb</p>
    <p class="big">bbbb</p>
</div>
<script>
    var id_div = document.querySelector("#content");
    var cls_div = document.querySelector(".layout");
    var cls_p = document.querySelector(".big");
</script>

querySelector

querySelectorAll()~返回匹配指定的css选择器的所有节点，返回的是NodeList类型的对象（NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中）

<div id="content">
    <div class="center">aaa</div>
    <div class="center clearfix">aaa</div>
    <div class="center">aaa</div>
    <div class="center">aaa</div>
    <div class="center">aaa</div>
    <div class="center">aaa</div>
    <div class="clearfix left"></div>
</div>
<script>
    var cls_div = document.querySelectorAll(".center");
    var cls_div2 = document.querySelectorAll("div.clearfix,div.left");
</script>

querySelectorAll

四、如何创建一个元素？如何给元素设置属性？

createElement()~用来生成HTML元素节点，如下代码

var div = document.createElement("div");
var a = document.createElement("a");

setAttribute()~用于设置元素属性，如下代码

//setAttribute("属性名","值");
var div_header = document.getElementById("header");
div_header.setAttribute("class","layout");

setAttribute()

五、元素的添加、删除？

appendChild()~接受一个节点对象作为参数，将其作为最后一个子节点插入当前节点，如下代码

var div = document.createElement("div");
document.body.appendChild(div);

如果参数节点是DOM中已经存在的节点，appendChild()会将其从原来的位置移到新位置

insertBefore()~用于将某个节点插入当前节点的指定位置，返回被插入的新节点；该方法接受两个参数：第一个参数是要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面，如下代码

var ul = document.createElement("ul");
var li = document.createElement("li");
ul.insertBefore(li,ul.firstChild);

如果insertBefore方法的第二个参数为null，则新节点将插在当前节点的最后位置，即变成最后一个子节点；如果所要插入的节点是当前DOM现有的节点，则该节点将从原有的位置移除，插入新的位置

removeChild()~接受一个子节点作为参数，用于从当前节点移除该子节点，返回被移除的子节点

var content = document.getElementById("content");
content.parentNode.removeChild(content);

六、DOM0 级事件处理程序和DOM2 级事件处理程序在事件监听时使用方式上有什么区别？

DOM0 级事件处理程序通过JS制定事件处理程序的传统方法，将一个函数赋值给一个事件处理程序属性进行事件监听；DOM2 级事件处理程序是通过定义了addEventListener()和removeEventListener()来进行事件监听
DOM0 级事件处理程序不能添加多个事件处理程序，而DOM2 级事件处理程序可以
DOM0 级事件处理程序不能选择是在事件捕获阶段调用事件处理程序还是在冒泡阶段调用事件处理程序，而DOM2 级事件处理程序可以

    <div id="ct">
       <a href="#" class="btn">aaaa</a>
   </div>
   <script>
       //DOM0 级事件处理程序
       document.querySelector(".btn").onclick = function(){
           console.log("DOM0 级事件处理程序");
       };
       //DOM2 级事件处理程序
       var handler1 = function(){
           console.log("DOM2 级事件处理程序111");
       };
       var handler2 = function(){
           console.log("DOM2 级事件处理程序2222");
       };
       document.querySelector(".btn").addEventListener("click",handler1,true);
       document.querySelector(".btn").addEventListener("click",handler2,true);

问答6

七、attachEvent()与addEventListener()的区别？

两者的参数个数不同：attachEvent()只有两个参数，而addEventListener()有三个参数；attachEvent()添加的事件处理程序只能发生在冒泡阶段，而addEventListener()得第三个参数可以决定其添加的事件处理程序是在捕获阶段处理还是在冒泡阶段处理
两者的第一个参数意义不同：attachEvent()第一个参数指明的是事件处理函数名称（onclick，onload），而addEventListener()第一个参数是事件类型（比如click，load）
两者的事件处理程序的作用域不同：attachEvent()的事件处理程序是在全局作用域中运行的，this等于window；而addEventListener()的事件处理程序被认为是元素的方法，即它是在元素的作用域中运行的，this是元素
两者为一个事件添加多个事件处理程序时，执行顺序不同：attachEvent()添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)；而addEventListener()添加多个事件处理程序时是按添加的先后顺序执行

八、解释IE事件冒泡和DOM2级事件传播机制？

IE事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
DOM2级事件：其规定事件流包括三个阶段--->事件捕获阶段、处于目标阶段、事件冒泡阶段；首先发生的是事件捕获，为截获事件提供了机会，然后是实际的目标接收到了事件，最后是冒泡阶段，这个阶段对事件做出响应

九、如何阻止事件冒泡？如何阻止默认事件？

阻止事件冒泡：
- DOM事件对象中：event.stopPropagation();
- IE事件对象中：event.cancelBubble = true;
阻止默认事件：
- DOM事件对象中：当cancelable属性为true时，可以使用event.preventDefault();
- IE事件对象中：event.returnValue = false;

    <div id="ct">
        <a href="#" class="btn">click me</a>
    </div>
    <script>
        var btn = document.querySelector(".btn");
        var ct = document.querySelector("#ct");
        //阻止事件冒泡 + 取消默认行为

        //DOM事件对象
        btn.addEventListener("click",function(event){
            console.log("in btn...");
            event.stopPropagation();//阻止进一步的事件捕获或冒泡
            event.preventDefault();//取消链接的跳转行为
        });
        ct.addEventListener("click",function(){
            console.log("in ct...");
        });

        //IE事件对象
        btn.attachEvent("onclick",function(event){
            console.log("in btn...");
            event.cancelBubble = true;//阻止冒泡
            event.returnValue = false;//取消链接的跳转行为
        });
        ct.attachEvent("onclick",function(){
            console.log("in ct...");
        });
    </script>

以在chrome中为例，效果如下图

问答9

代码部分

一、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容，不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

方法一~直接绑定在元素上，实现代码如下

    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");
        for(var i = 0;i < lis.length;i++){
            lis[i].addEventListener("click",function(){
                console.log(this.innerText);
            });
        }
    </script>

方法一

方法二~使用事件代理，实现代码如下

    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>
    <script>
        var ct = document.querySelector(".ct");
        function handler(event){
            console.log(event.target.innerText);
        }
        ct.addEventListener("click",handler);
    </script>

方法二

二、补全代码，要求：

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容

    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>
    <input class="ipt-add-content" placeholder="添加内容"/>
    <button id="btn-add-start">开头添加</button>
    <button id="btn-add-end">结尾添加</button>
    <script>
    //todo ...
    </script>

代码及展示链接，实现代码如下

        <ul class="ct">
            <li>这里是</li>
            <li>饥人谷</li>
            <li>前端6班</li>
        </ul>
        <input class="ipt-add-content" placeholder="添加内容"/>
        <button id="btn-add-start">开头添加</button>
        <button id="btn-add-end">结尾添加</button>
        <script>
            var ct = document.querySelector(".ct"),
                ipt = document.querySelector(".ipt-add-content"),
                addStart = document.querySelector("#btn-add-start"),
                addEnd = document.querySelector("#btn-add-end");
            function liHandler(event){
                if(event.target.tagName.toLowerCase() === "li"){
                    console.log(event.target.innerText);
                }
            }
            function btnstartHandler(){
                var li = document.createElement("li");
                var pattern = /\S+/;
                if(pattern.test(ipt.value)){
                    li.innerText = ipt.value;
                    ct.insertBefore(li,ct.firstChild);
                }else{
                    console.log("please enter a non null character")
                }
            }
            function btnendHandler(){
                var li = document.createElement("li");
                var pattern = /\S+/;
                if(pattern.test(ipt.value)){
                    li.innerText = ipt.value;
                    ct.appendChild(li);
                }else{
                    console.log("please enter a non null character")
                }
            }
            ct.addEventListener("click",liHandler);
            addStart.addEventListener("click",btnstartHandler);
            addEnd.addEventListener("click",btnendHandler);
        </script>

代码2

三、补全代码，要求：当鼠标放置在`li`元素上，会在`img-preview`里展示当前`li`元素的`data-img`对应的图片

        <ul class="ct">
            <li data-img="1.png">鼠标放置查看图片1</li>
            <li data-img="2.png">鼠标放置查看图片2</li>
            <li data-img="3.png">鼠标放置查看图片3</li>
        </ul>
        <div class="img-preview"></div>
        <script>
        //todo ...
        </script>

代码及展示链接，实现代码如下

        <ul class="ct">
            <li data-img="img/1.jpg">鼠标放置查看图片1</li>
            <li data-img="img/2.jpg">鼠标放置查看图片2</li>
            <li data-img="img/3.jpeg">鼠标放置查看图片3</li>
        </ul>
        <div class="img-preview"></div>
        <script>
            var ct = document.querySelector(".ct"),
                imgview = document.querySelector(".img-preview"),
                img = document.createElement("img");
            function handler(event){
                img.setAttribute("src",event.target.getAttribute("data-img"));
                imgview.appendChild(img);
            }
            ct.addEventListener("mouseover",handler);
        </script>

代码3

四、实现如下图Tab切换的功能

tab

代码及展示链接，实现代码如下

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>exercise</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                width:904px;
                margin:50px auto 0 auto;
            }
            li{
                width: 300px;
                height: 40px;
                line-height:40px;
                text-align:center;
                border:1px solid #ccc;
                list-style-type:none;
                cursor:pointer;
                font-size:24px;
                float:left;
            }
            li.active{
                background-color:#eee;
            }
            li:nth-child(2){
                border-left:none;
                border-right:none;
            }
            .clearfix:after{
                content: "";
                display: block;
                clear:both;
            }
            .content{
                width:902px;
                height:400px;
                margin:0 auto;
                border:1px solid #ccc;
                border-top:none;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <ul class="tab clearfix">
            <li class="active">tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <div class="content">内容1</div>
        <script>
            var tab = document.querySelector(".tab"),
                content = document.querySelector(".content");
            function tabHandler(event){
                for(var i = 0;i < tab.children.length;i++){
                    tab.children[i].style.backgroundColor = "white";
                }
                event.target.style.backgroundColor = "#eee";
                content.innerText = "内容" + event.target.innerText[3];
            }
            tab.addEventListener("click",tabHandler);
        </script>
    </body>
</html>

五、实现下图的模态框功能

dialog

代码及展示链接，实现代码如下

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>exercise</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            a{
                color:black;
                text-decoration:none;
            }
            #btn{
                width:60px;
                height: 30px;
                margin-top:20px;
                margin-left:20px;
                border:1px solid #ccc;
                border-radius:5px;
                font-size:20px;
                cursor: pointer;
                display: block;
            }
            #btn:hover{
                background-color: #eee;
            }
            #cover{
                background-color: #000;
                opacity: 0.5;
                display: none;
                position:absolute;
                top:0;
                right:0;
                bottom:0;
                left:0;
            }
            #modal-dialog {
                width: 400px;
                height: 260px;
                border: 1px solid #ccc;
                border-radius: 6px;
                background-color: #fff;
                display: none;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -130px 0 0 -200px;
            }
            #modal-dialog .header{
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
            }
            #modal-dialog .header h3{
                display: inline-block;
                margin-left: 15px;
            } 
            #modal-dialog .header .close{
                font-size:20px;
                font-weight: bold;
                margin-right:10px;
                float:right;
            }
            #modal-dialog .content{
                height: 120px;
                padding-top:60px;
                padding-left: 15px;
                border-bottom: 1px solid #ccc;
            }
            #modal-dialog .content p{
                margin:10px 0;
            }
            #modal-dialog .footer .btn{
                padding:10px;
                float: right;
            }
            .close:hover,.btn:hover{
                color:#ccc;
            }
            .clearfix{
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <button id="btn">点我</button>
        <div id="cover"></div>
        <div id="modal-dialog">
            <div class="header">
                <h3>我是标题</h3>
                <a class="close" href="#">×</a>
            </div>
            <div class="content">
                    <p>我是内容1</p>
                    <p>我是内容2</p>
                </div>
                <div class="footer clearfix">
                    <a href="#" class="btn btn-confirm">确定</a>
                    <a href="#" class="btn btn-cancel">取消</a>
                </div>
        </div>
        <script>
            var btn = document.querySelector("#btn"),
                cover = document.querySelector("#cover"),
                modal = document.querySelector("#modal-dialog"),
                close = document.querySelector(".close"),
                btncancel = document.querySelector(".btn-cancel");
            btn.addEventListener("click",btnHandler);
            cover.addEventListener("click",hideModalHandler);
            close.addEventListener("click",hideModalHandler);
            btncancel.addEventListener("click",hideModalHandler);
            function btnHandler(){
                showModal(modal);
            }
            function hideModalHandler(){
                hideModal(modal);
            }
            function showModal(modal){
                modal.style.display = "block";
                cover.style.display = "block";
            }
            function hideModal(modal){
                modal.style.display = "none";
                cover.style.display = "none";
            }
        </script>
    </body>
</html>

最后编辑于：2017.12.04 03:29:37

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,948评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,371评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,490评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,521评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,627评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,842评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,997评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,741评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,203评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,534评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,673评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,339评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,955评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,770评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,000评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,394评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,562评论 2赞 349

任务二十二~Dom、事件

问答部分

一、dom对象的innerText和innerHTML有什么区别？

二、element.children和element.childNodes的区别？

三、查询元素有几种常见的方法？

四、如何创建一个元素？如何给元素设置属性？

五、元素的添加、删除？

六、DOM0 级事件处理程序和DOM2 级事件处理程序在事件监听时使用方式上有什么区别？

七、attachEvent()与addEventListener()的区别？

八、解释IE事件冒泡和DOM2级事件传播机制？

九、如何阻止事件冒泡？ 如何阻止默认事件？

代码部分

一、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容，不考虑兼容

二、补全代码，要求：

三、补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片

四、实现如下图Tab切换的功能

五、实现下图的模态框功能

推荐阅读更多精彩内容

九、如何阻止事件冒泡？如何阻止默认事件？

三、补全代码，要求：当鼠标放置在`li`元素上，会在`img-preview`里展示当前`li`元素的`data-img`对应的图片