Dom、事件

问题

1.dom对象的innerText和innerHTML有什么区别？

innerText：
当使用innerText读取值时，如果有HTML标签，它会过滤掉HTML标签，并且按照由浅入深的顺序将所有的文本拼接起来。
当使用innerText写入值时，结果会删除dom对象的所有子节点，插入包含的相应文本值的文本节点。如果有HTML标签，它会对HTML语法字符（小于号、大于号、引号及和号等）进行编码，使HTML标签以正常的文本形式出现在dom对象中。
举例：

<body>
    <div id="content">
        <p>This is a <strong>test</strong> paragraph</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script>
    var oDiv = document.getElementById("content");
    console.log(oDiv.innerText);
    oDiv.innerText = "<h2>Hello & <strong>hunger</strong></h2>";

innerText运行结果

innerHTML
当使用innerHTML读取值时，返回dom对象的所有子节点（包括元素、注释和文本节点）对应的HTML标记。
当使用innerHTML写入值时，会根据写入的值创建新的DOM树，然后用这个DOM树完全替换原先所有的子节点。
举例:

<body>
    <div id="content">
        <p>This is a <strong>test</strong> paragraph</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script>
    var oDiv = document.getElementById("content");
    console.log(oDiv.innerHTML);
    oDiv.innerHTML = "<h2>Hello & <strong>hunger</strong></h2>";

innerHTML运行结果.png

那么总而言之：innerHTML是一种插入HTML字符的方法，所以它会根据标签生成DOM树，而innerText是一种插入文本的方法，所以它会过滤掉标签。

2.elem.children和elem.childNodes的区别？

elem.children
每个节点都会有一个childNodes属性，其中保存着一个NodeList对象。而NodeList是一个类数组，用于保存节点中所有的子节点（共12中，Element元素节点只是其中一种，具体哪12种可以参考深入理解DOM节点类型第一篇——12种DOM节点类型概述）。这组节点是有序的，可以通过位置来访问。
举例：

<body>
        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    console.log(oUl.children.length);//返回7,包括3个元素节点和4个空白字符的文本节点
</script>

而elem.children只会返回节点的元素子节点，除此之外，与elem.childNodes没什么区别。
举例：

<body>
        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    console.log(oUl.children.length);//返回3
</script>

3.查询元素有几种常见的方法？

querySelector 方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。
如果有多个节点满足匹配条件，则返回第一个匹配的节点。
如果没有发现匹配的节点，则返回null。
该方法在HTML文档上和HTML元素上都能调用。

querySelectorAll 方法与querySelector用法类似。
区别是返回一个静态的NodeList对象（NodeList 本质上是一个动态的 Node 集合，只是规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象），包含所有匹配给定的选择器的节点。
该方法在HTML文档上和HTML元素上都能调用。
getElementById 方法返回匹配指定的id属性的元素节点。
如果没有发现匹配的节点，则返回null。
该方法只能在HTML文档上调用，不能在HTML元素上调用。
getElementsByTagName 方法接受一个元素的标签名为参数，返回一个实时的NodeList对象，包含所有匹配的子节点。
该方法在HTML文档上和HTML元素上都能调用。
特殊的是，在HTML文档中，也就是使用document.getElementsByTagName时，会返回一个HTMLCollection对象（与NodeList很像），这是一个“动态”的合集，可以实时反映 HTML文档的变化。
getElementsByClassName方法类似getElementsByTagName，只不过它接受的参数为元素的class属性值组成的字符串。
如果参数是一个空格分隔的字符串，元素的class必须符合所有的字符串之中的class才能匹配。

刚开始接触HTMLCollection和NodeList时，对它们之间关系挺莫名其妙的，后来查阅了下资料才稍微有些明白。
具体可以参考这个回答：NodeList 和 HTMLCollection之间的关系？
简单来说就是由于历史原因，DOM规范分为2个部分：Core（最基础的XML解析说明）和HTML（HTML的特有API解析说明）。而NodeList是属于Core的，HTMLCollection 是属于HTML的。
它们返回的都是实时的Node合集，并且可以Node[取索引]来返回子节点。
不同的是NodeList是node节点集合（即包含元素节点，文档节点和注释节点等12种节点类型），而HTMLCollection只包含元素节点集合，所以在HTML文档中，getByElement系列都是HTMLCollection集合。
而有的书上说这些查询元素的方法都是NodeList集合，有的说是HTMLCollection合集，看起来很矛盾，其实是讨论的使用环境不一样罢了。
另外动态集合虽然很实用，但是在循环它们的时候要特别小心，不要因为忽略了实时变化而造成死循环。
参考：深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

4.如何创建一个元素？如何给元素设置属性？

document.createElement()方法可以创建新的元素节点，这个方法只接受一个参数，就是创建元素的标签名。
document.createTextNode()方法可以用来创建新的文本节点，这个方法方法值接受一个参数，就是要插入节点的文本。
setAttribute()用来给元素设置属性，这个方法接收2个参数，需要设置的属性名和属性值。
举例：

<body>
    <div></div>
</body>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    var oImg = document.createElement("img");
    var txt = document.createTextNode("my images")
    oImg.setAttribute("alt","A cup of coffee");
    oImg.setAttribute("src","images/coffee.jpg");
    oDiv.appendChild(oImg);
    oDiv.appendChild(txt);
</script>

运行结果

5.元素的添加、删除。

元素的添加：
appendChild()方法，让指定元素成为某个现有元素的最后一个子元素。
用语法表示：parent.appendChild(child);
举例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.createElement("li");
    oUl.appendChild(oLi);
</script>

运行结果

insertBefore()方法；让指定的元素插入到某个现有元素的前面。调用此方法，必须告诉它三件事：
1.新元素：你想插入的元素（newElement）
2.目标元素：你想把这个新元素插入到哪个元素（targetElement）之前。
3.父元素：目标元素的父元素（parentElement）
下面是该方法的调用语法：parentElment.insertBefore(newElement,targetElement)
举例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.createElement("li");
    oUl.insertBefore(oLi,oUl.firstChild);
</script>

运行结果

元素的删除：
removeChild()方法：删除某个元素，不过要注意的是，该方法不是在待删除的元素上调用，而是在其父元素上调用。
用语法表示就是：parent,removerChild(child).
举例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.querySelectorAll("li")[0];
    oUl.removeChild(oLi);
</script>

运行结果

6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0级事件就是将一个函数赋值给一个事件处理程序属性。
这些属性通常都是小写，例如onclick，来看一个例子:

<body>
<input id="myBtn" type="button" value="点击我"/>
</body>
<script>
    var oBtn = document.getElementById("myBtn");
    oBtn.onclick = function(){
        console.log(this.id);
    }
</script>

运行结果

使用DOM0 级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行，换句话说，程序中的this引用当前元素，所以，上述例子点击按钮后显示的是元素的ID。
另外如果要删除DOM0 级事件处理程序，只要将事件处理程序设置为null即可。

DOM2 级定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removerEventListerner(）。
所有DOM节点都包含这两个方法，并且都接受3个参数：
1.要处理的事件名
2.作为事件处理程序的函数
3.一个布尔值，布尔值如果是true，表示在捕获阶段调用事件处理程序，如果是flase，表示在冒泡阶段调用事件处理程序。

看例子：

<body>
<input id="myBtn" type="button" value="点击我"/>
</body>
<script>
    var oBtn = document.getElementById("myBtn");
    oBtn.addEventListener("click",function(){
        console.log(this.id);
    },false);
    oBtn.addEventListener("click",function(){
        console.log("Hello world")
    },false);
</script>

运行结果

与DOM0 级的区别在于，使用DOM2 级方法可以添加多个事件处理程序。

另外，通过addEventListener()添加的事件只能通过removeEventListener()来删除，删除时传入的参数与添加时相同，这也就意味着添加的匿名函数是无法删除的。

7.attachEvent与addEventListener的区别？

1.接受的参数：
attachEvent接受2个参数：事件名称，事件处理函数，只支持事件冒泡。
addEventListener接受3个参数：事件名称，事件处理函数，布尔值

2.事件名称：
attachEvent事件名称前面要加“on”，如“onclick”，
addEventListener不需要，如“click”。

3.作用域：
attachEvent会在全局作用域中运行，即this = window。
addEventListener是在元素作用域中运行，this指的是当前元素。

4.事件处理程序的顺序：
addEventListener是按照添加顺序执行。
attachEvent是按照添加顺序相反执行。

5.删除方法：
attachEvent使用detachEvent删除添加事件。
addEventListener使用removeEventListener删除添加事件。

6.兼容：
IE8以及IE8以下只支持attachEvent，
IE9开始支持addEventListener。

8.解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡：指的是IE的事件流，事件开始时由最具体的元素（文档嵌套层次最深的那个节点）接受，然后逐渐向上传播到较为不具体的节点（文档）
DOM2的事件传播机制：指的是DOM2级事件的事件流，包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标收到事件。最后一个是冒泡阶段，事件作出相应。

9.如何阻止事件冒泡？如何阻止默认事件？

stopPropagation()方法可以阻止事件冒泡，如果bubbles（表明事件是否冒泡）为ture，则可以使用这个方法。
举例：

<body>
    <div id="test">
        <input id="myBtn" type="button" value="点击我"/>
    </div>
</body>
<script>
    var oDiv = document.getElementById("test");
    var oBtn = document.getElementById("myBtn");
    oDiv.addEventListener("click",function(){
        console.log(this.id+"我被冒泡了");
    },false);
    oBtn.addEventListener("click",function(ev){
        console.log(this.id);
        ev.stopPropagation();
    },false);
</script>

运行结果

preventDefault()方法可以阻止默认事件，如果cancelable（表明是否可取消事件的默认行为）为ture，则可以使用这个方法。
举例：

<body>
    <div id="test">
        <a id="myLink" href="http://www.baidu.com">点击我</a>
    </div>
</body>
<script>
    var link = document.getElementById("myLink");
    link.addEventListener("click",function(ev){
        ev.preventDefault();//取消a链接点击转跳到指定的URL的默认行为。
    },false);
</script>

运行结果

代码

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

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

解答代码：
方法一，循环子元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务1</title>
</head>
<body>
<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务6班</li>
</ul>
<script>
    var oUl = document.getElementsByClassName("ct");
    var aLi = oUl[0].getElementsByTagName("li");
    for(var i=0,len=aLi.length; i<len; i++){
        aLi[i].addEventListener("click",function(){
            console.log(this.innerText);
        },false);
    }
</script>
</body>
</html>

代码1-方法1效果预览
方法二，事件代理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务1</title>
</head>
<body>
<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务6班</li>
</ul>
<script>
    var oUl = document.getElementsByClassName("ct")[0];
    oUl.addEventListener("click",function(ev){
        console.log(ev.target.innerText)
    })
</script>
</body>
</html>

代码1-方法2效果预览

2.补全代码，要求：

1.当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
2.当点击每一个元素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>

解决代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务2</title>
</head>
<body>
<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 oUl = document.getElementsByClassName("ct")[0];
    var oLi = document.getElementsByTagName("li");
    var startBtn = document.getElementById("btn-add-start");
    var endBtn = document.getElementById("btn-add-end");
    var addContent = document.getElementsByClassName("ipt-add-content")[0];
    startBtn.addEventListener("click",function(){
        if(!addContent.value){
            alert("请输入内容");
        }
        else {
            var newLi = document.createElement("li");//注意逻辑顺序，是点击之后再创建一个新的li元素
            newLi.innerText = addContent.value;
            oUl.insertBefore(newLi,oLi[0]);
        }
    },false)
    endBtn.addEventListener("click",function(){
        if(!addContent.value){
            alert("请输入内容")
        }
        else{
            var newLi = document.createElement("li");
            newLi.innerText = addContent.value;
            oUl.appendChild(newLi);
        }
    },false)
    oUl.addEventListener("click",function(ev){
        console.log(ev.target.innerText);
    },false)
</script>
</body>
</html>

代码2效果预览

3.补全代码，要求：当鼠标放置在`li`元素上，会在img-preview里展示当前`li`元素的date-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>

解决代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务2</title>
</head>
<body>
<ul class="ct">
    <li data-img="1.jpg">鼠标放置查看图片1</li>
    <li data-img="2.jpg">鼠标放置查看图片2</li>
    <li data-img="3.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var oDiv = document.querySelector(".img-preview");
        newImg = document.createElement("img");
    oDiv.appendChild(newImg);
    //方法一：循环子元素，设置事件程序
    var oLi = document.getElementsByTagName("li");
    for(var i=0,len=oLi.length; i<len; i++){
        oLi[i].onmouseover = function(){
            var source = this.getAttribute("data-img");
            newImg.setAttribute("src",source);
        }
    }

    //方法2：对父元素进行事件监听
//    var oUl = document.querySelector(".ct");
//    oUl.addEventListener("mouseover",function(ev){
//        var source = ev.target.getAttribute("data-img");
//        newImg.setAttribute("src",source);
//    },false);
</script>
</body>
</html>

代码3-方法1效果预览
 代码3-方法2效果预览
4.实现如下图Tab切换的功能
解决代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务2</title>
    <style type="text/css">
        body,ul,li,p{
            margin:0;
            padding:0;
        }
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
        }
        .tab-switch *{
            box-sizing:border-box;
        }
        .tab-switch{
            width:600px;
            margin:auto;
            margin-top:40px;
            border:1px solid #ccc;
        }
        .tab li{
            list-style-type:none;
            float:left;
            width:200px;
            height:40px;
            line-height:40px;
            text-align:center;
            cursor:pointer;
            border-right:1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .tab li:last-child{
            border-right:none;
        }
        .tab .active {
            background-color:#eee;
        }
        .tab-switch div{
            display:none;
            height:300px;
            padding:20px;
        }
        .tab-switch .content{
            display:block;
        }
    </style>
</head>
<body>
    <div class="tab-switch">
        <ul class="tab clearfix">
            <li class="active">tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <div class="content">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>
    <script>
        var oDiv = document.querySelector(".tab-switch");
            aLi = oDiv.getElementsByTagName("li");
            aDiv = oDiv.getElementsByTagName("div");
        for(var i=0,len=aLi.length; i<len; i++){
            aLi[i].index = i;//创建一个index属性来表示div的序列号。
            aLi[i].addEventListener("click",function(){
                for(var i=0,len=aLi.length; i<len; i++){
                    aLi[i].className= "";
                    aDiv[i].style.display = "none";
                }
                this.className = "active";
                aDiv[this.index].style.display="block";
            },false);
        }
    </script>
</body>
</html>

代码4效果预览

5.实现下图的模态框功能

方法1，直接修改显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务5</title>
    <style type="text/css">
        #modal-1{
            display:none;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        .cover{
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color: #000;
            opacity:0.4;
            z-index:99;
        }
        .modal-ct{
            position:fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width:400px;
            border-radius: 3px;
            background-color:#fff;
            z-index:100;
        }
        .header {
            position:relative;
            height:36px;
            line-height:36px;
            border-bottom: 1px solid #ccc;
        }
        h3{
            margin: 0;
            padding-left: 10px;
            font-size: 16px;
        }
        .close{
            position:absolute;
            right:10px;
            top: 10px;
            line-height:1;
        }
        .content{
            padding:10px;
        }
        .footer{
            padding:10px;
            border-top:1px solid #eee;
        }
        .footer:after{
            content:'';
            display:block;
            clear:both;
        }
        .btn{
            float:right;
            margin-left:10px;
        }
    </style>
</head>
<body>
    <button class="btn-modal">点我！</button>
    <div id="modal-1" class="modal-dialog">
        <div class="cover"></div>
        <div class="modal-ct">
            <div class="header">
                <h3>我是标题3</h3>
                <a class="close" href="#">X</a>
            </div>
            <div class="content">
                <p>我是内容1</p>
                <p>我是内容2</p>
            </div>
            <div class="footer">
                <a class="btn btn-confirm" href="#">确定</a>
                <a class="btn btn-cancel" href="#">取消</a>
            </div>
        </div>
    </div>
    <script>
        var btn = document.querySelector(".btn-modal"),
                modal = document.querySelector("#modal-1"),
                modalCt= document.querySelector("#modal-1 .modal-ct");
        btn.addEventListener("click",function(ev){
            ev.stopPropagation();
            showModal(modal);
        });
        modalCt.addEventListener("click",function(ev){
            ev.stopPropagation();
            if(hasClass(ev.target,"close") || hasClass(ev.target,"btn-cancel")){
                hideModal(modal);
            }
        });
        document.body.addEventListener("click",function(){
            hideModal(modal);
        })
        function showModal(modal){
            modal.style.display = "block";
        }
        function hideModal(modal) {
            modal.style.display = "none";
        }
        function hasClass(ele, cls){
            return ele.className.match(new RegExp('\\b'+cls+'\\b'));
        }
    </script>
</body>
</html>

代码5-方法1效果预览
方法2，通过添加和删除类名来改变显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务5-2</title>
    <style type="text/css">
        a{
            text-decoration: none;
            color: #333;
        }
        .cover{
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color: #000;
            opacity:0.4;
            z-index:99;
            display:none;
        }
        .modal-ct{
            position:fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width:400px;
            border-radius: 3px;
            background-color:#fff;
            z-index:100;
            display:none;
        }
        .header {
            position:relative;
            height:36px;
            line-height:36px;
            border-bottom: 1px solid #ccc;
        }
        h3{
            margin: 0;
            padding-left: 10px;
            font-size: 16px;
        }
        .close{
            position:absolute;
            right:10px;
            top: 10px;
            line-height:1;
        }
        .content{
            padding:10px;
        }
        .footer{
            padding:10px;
            border-top:1px solid #eee;
        }
        .footer:after{
            content:'';
            display:block;
            clear:both;
        }
        .btn{
            float:right;
            margin-left:10px;
        }
        .active{
            display:block;
        }
    </style>
</head>
<body>
    <button class="btn-modal">点我！</button>
    <div id="modal-1" class="modal-dialog ">
        <div class="cover"></div>
        <div class="modal-ct">
            <div class="header">
                <h3>我是标题3</h3>
                <a class="close" href="#">X</a>
            </div>
            <div class="content">
                <p>我是内容1</p>
                <p>我是内容2</p>
            </div>
            <div class="footer">
                <a class="btn btn-confirm" href="#">确定</a>
                <a class="btn btn-cancel" href="#">取消</a>
            </div>
        </div>
    </div>
    <script>
        var oBtn = document.querySelector(".btn-modal"),
            oCover = document.querySelector(".cover"),
            oModalCt= document.querySelector("#modal-1 .modal-ct");
        oBtn.addEventListener("click",function(ev){
            ev.stopPropagation();
            addClass(oCover,"active");
            addClass(oModalCt,"active");
        });
        oModalCt.addEventListener("click",function(ev){
            ev.stopPropagation();
            if(hasClass(ev.target,"close") || hasClass(ev.target,"btn-cancel")){
                removeClass(oCover,"active");
                removeClass(oModalCt,"active");
            }
        });
        document.body.addEventListener("click",function(ev){
            removeClass(oCover,"active");
            removeClass(oModalCt,"active");
        });
        function hasClass(ele, cls){
            var reg = new RegExp('\\b'+cls+'\\b','g');
            return reg.test(ele.className);
        };
        function addClass(ele, cls){
            if(!hasClass(ele,cls)){
                ele.className += " "+cls
            }
        };
        function removeClass(ele,cls){
            if(hasClass(ele,cls)){
                ele.className = ele.className.replace(cls,"")
            }
        };
    </script>
</body>
</html>

代码5-方法2效果预览

本文版权归本人和饥人谷所有，转载请注明来源。

最后编辑于：2017.12.04 04:05:20

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

Dom、事件

问题

1.dom对象的innerText和innerHTML有什么区别？

2.elem.children和elem.childNodes的区别？

3.查询元素有几种常见的方法？

4.如何创建一个元素？如何给元素设置属性？

5.元素的添加、删除。

6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

7.attachEvent与addEventListener的区别？

8.解释IE事件冒泡和DOM2事件传播机制？

9.如何阻止事件冒泡？如何阻止默认事件？

代码

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

2.补全代码，要求：

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

5.实现下图的模态框功能

推荐阅读更多精彩内容

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