Dom、事件

2016-09-05 本文已影响91人进击的阿群

Q&A：

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
  </head>
  <body>
    <div id="div1">
      <span>test1</span>
      test2
    </div>
    <script>
      var x = document.getElementById("div1");
    </script>
  </body>
</html>

innerHTML和innerText

innerHTML
从对象开始到结束标签中的所有内容，包括HTML标签。

innerHTML兼容情况

innerText
从对象开始到结束标签中的所有文本内容，不包括标签；并不是W3C标准属性，对有些用户可能不生效，所以尽量不用innerText，如果要达到同样效果，只要用innerHTML获取内容，然后通过正则表达式去除标签即可：

innerHTML代替innerText

outerHTML和outText
outerHTML是包括对象本身标签的属性，而outText和innerText一样，都是其中的内容。

参考：innerText

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

children属性是用于获取元素的子元素节点，不包括文本节点；
childNodes属性获取元素的所有子元素节点，包括文本节点，其中空格或换行也算文本节点；
eg：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
  </head>
  <body>
    <p id="para">children</p>
    <button id="btn">请点击</button>
    <script>
      var txt = "";
      var c = document.body.children;
      for(var i = 0; i < c.length; i++) {
        txt += c[i].nodeName + "<br>";
      }
      function handler() {
        var para = document.getElementById('para');
        para.innerHTML = txt;
      }
      var btn = document.getElementById('btn');
      btn.addEventListener('click',handler);
    </script>
  </body>
</html>

children

children效果
当把children设置为childnodes时，即var c = document.body.childNodes;：

childNodes

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

通过ID查找：document.getElementById();
得到对应ID的元素；
通过类名查找：document.getElementsByClassName();
得到包含此类的所有元素的数组；
IE5,6,7,8不支持此方法；
通过标签名查找：document.getElementsByTageName();
得到该标签的所有元素的数组；
通过新方法查找：document.querySelector();
得到匹配到的第一个元素；
IE8不匹配ID选择器的兄弟元素，即#p+a；
querySelectorAll();
得到所有匹配的元素的数组；
IE8不匹配ID选择器的兄弟元素，即#p+a；

1.png

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

document.createElement();创建元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      var para = document.createElement('p'),
          txt = document.createTextNode('新增段落');
      para.appendChild(txt);
      document.body.appendChild(para);
    </script>
  </body>
</html>

2.png

element.setAttribute(name, value)设置属性：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a id="anchor" href="#">点我</a>
    <script>
      var el = document.getElementById('anchor');
      el.setAttribute('href', 'http://www.baidu.com');
    </script>
  </body>
</html>

createElement

4.png

5. 元素的添加、删除？

元素添加：
el.appendChild(name);将子元素放在父元素尾部；
el.insertBefore(name, brother);将元素放在兄弟元素前面；
el.removeChild(name);移除元素；
eg：

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title></title>
 </head>
 <body>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <script>
     var els = document.getElementsByTagName('p'),
         para = document.createElement('p'),
         txt = document.createTextNode('new');
     para.appendChild(txt);
   </script>
 </body>
</html>

5.png

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

DOM0事件和DOM2级事件都是通过给元素节点注册特定事件处理程序（即事件监听器）来对事件进行处理；
DOM0事件只能给事件注册一种处理方法，而DOM2事件可以注册多个处理方法；
DOM2事件可以选择在捕获阶段还是冒泡阶段进行监听器触发，DOM0视浏览器设置而定；
IE9之前不支持DOM2级事件，而DOM0则跨浏览器且无兼容问题；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <button id="btn">Click Me</button>
    <script>
      var btn = document.getElementById('btn');
      btn.onclick = function showMessage() {
        console.log('This is DOM0');
      }
      function handler1() {
        console.log('This is DOM2');
      }
      function handler2() {
        console.log('This is another DOM2');
      }
      btn.addEventListener('click', handler1);
      btn.addEventListener('click', handler2);
    </script>
  </body>
</html>

6.png

7. attachEvent与addEventListener的区别？

attachEvent：是IE的事件监听器，类似DOM2级事件处理程序，但是从IE11后不再支持，接受两个参数，第一个是事件类型，格式为'on + type'，第二个为事件处理程序，默认为冒泡事件。

IE11不支持attachEvent

addEventListener：是W3C标准的事件监听器，IE9之前不支持，接受3个参数，第一个为事件类型，格式为'type'，例如'click'，第二个为事件处理程序，第三个参数默认为false，即冒泡事件，设置为true则为捕获阶段事件。

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

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
DOM2事件传播机制属于DOM事件流，并且DOM2事件的事件处理程序支持第三个参数设置具体传播机制，即捕获或冒泡。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-event</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #one {
        width: 500px;
        height: 300px;
        background-color: rgb(255, 0, 0);
      }
      #two {
        width: 400px;
        height: 270px;
        background-color: rgb(255, 50, 50);
      }
      #three {
        width: 300px;
        height: 235px;
        background-color: rgb(255, 100, 100);
      }
      #four {
        width: 200px;
        height: 200px;
        background-color: rgb(255, 150, 150);
      }
    </style>
  </head>
  <body>
    <div id="one">
      <div id="two">
        <div id="three">
          <div id="four"></div>
        </div>
      </div>
    </div>
    <script>
      var one = document.getElementById('one'),
          two = document.getElementById('two'),
          three = document.getElementById('three'),
          four = document.getElementById('four'),
          temp = false; //temp变量，用于设置addEventListener的第三参数，捕获or冒泡
      one.addEventListener('click', function() {
        console.log('one');
      }, temp);
      two.addEventListener('click', function() {
        console.log('two');
      }, temp);
      three.addEventListener('click', function() {
        console.log('three');
      }, temp);
      four.addEventListener('click', function() {
        console.log('four');
      }, temp);
      /* temp = true; 捕获事件
      点击 four 会显示
      one two three four
         temp = false; 冒泡阶段
      点击 four 会显示
      four three two one
      */
    </script>
  </body>
</html>

8.png

false冒泡

参考：
DOM2和IE的事件传播机制（捕捉，起泡）
饥人谷课件——事件
 DOM捕获事件与冒泡事件

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

阻止事件冒泡：
DOM2级：event.stopPropagation();
IE中：event.cancelBubble = true;
阻止默认事件：
DOM2级：event.preventDefault();
IE中：event.returnValue = false;
依旧以上个addEventListener的例子为例：

    <script>
      var one = document.getElementById('one'),
          two = document.getElementById('two'),
          three = document.getElementById('three'),
          four = document.getElementById('four'),
          temp = false; //temp变量，用于设置addEventListener的第三参数，捕获or冒泡
      one.addEventListener('click', function() {
        console.log('one');
      }, temp);
      two.addEventListener('click', function() {
        console.log('two');
      }, temp);
      three.addEventListener('click', function() {
        console.log('three');
      }, temp);
      four.addEventListener('click', function(event) {
        console.log('four');
        event.stopPropagation();
      }, temp);
    </script>
    ```

![stopPropagation](https://img.haomeiwen.com/i2404178/bea4525b0b793c0c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***
##代码
###1. 当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
``` html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-1</title>
  </head>
  <body>
    <ul class="ct">
      <li>这里是</li>
      <li>饥人谷</li>
      <li>任务6班</li>
    </ul>
    <script>
      var el = document.getElementsByClassName('ct');
      function handler(event) {
        console.log(event.target.innerHTML);
      }
      el[0].addEventListener('click', handler);
    </script>
  </body>
</html>

2. 补全代码，要求：

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-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 ct = document.getElementsByClassName('ct'),
          iptAddContent = document.getElementsByClassName('ipt-add-content'),
          btnAddStart = document.getElementById('btn-add-start'),
          btnAddEnd = document.getElementById('btn-add-end');

          function handler1() {
            var newItem = document.createElement('li'),
                txt = document.createTextNode(iptAddContent[0].value);
            newItem.appendChild(txt);
            ct[0].insertBefore(newItem, ct[0].children[0]);
          }
          function handler2() {
            var newItem = document.createElement('li'),
                txt = document.createTextNode(iptAddContent[0].value);
            newItem.appendChild(txt);
            ct[0].appendChild(newItem);
          }
      btnAddStart.addEventListener('click', handler1);
      btnAddEnd.addEventListener('click', handler2);
      ct[0].addEventListener('click', function(event) {
        console.log(event.target.innerHTML);
      });
    </script>
  </body>
</html>

代码2.png

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-3</title>
  </head>
  <body>
    <ul class="ct">
      <li data-img="img/1.jpg">鼠标防止查看图片1</li>
      <li data-img="img/2.jpg">鼠标防止查看图片2</li>
      <li data-img="img/3.jpg">鼠标防止查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
      var ct = document.querySelector('.ct'),
          imgPreview = document.querySelector('.img-preview'),
          dataImg = document.createElement('img');
      ct.addEventListener('mouseover', function(event) {
        var txt = event.target.getAttribute('data-img');
        dataImg.setAttribute('src', txt);
        imgPreview.appendChild(dataImg);
      });
    </script>
  </body>
</html>

代码3.png

4. 实现如下图Tab切换的功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-4</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      li {
        float: left;
        list-style: none;
        padding: 0 auto;
        width: 200px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-right: 1px solid #ccc;
        cursor: pointer;
      }
      li:first-child {
        background-color: #eee;
      }
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
      }
      #ct2 {
        width: 601px;
        height: 200px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <ul id="ct1" class="clearfix">
      <li>tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>
    <div id="ct2">内容1</div>
    <script>
      var ct1 = document.querySelector('#ct1'),
          ct2 = document.querySelector('#ct2');
      ct1.addEventListener('click', function(event) {
        var txt = event.target.innerText;
        for(var i = 0; i < ct1.children.length; i++) {
          ct1.children[i].style.backgroundColor = "#fff";
        }
        event.target.style.backgroundColor = "#eee";
        ct2.innerText = '内容' + txt[txt.length-1];
      });
    </script>
  </body>
</html>

代码4.png

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>task22-5</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #ct {
      display: none;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -100px 0 0 -150px;
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background-color: #fff;
    }
    #header {
      height: 35px;
      line-height: 35px;
      border-bottom: 1px solid #ccc;
    }
    #header h4 {
      display: inline-block;
      margin-left: 10px;
    }
    #content {
      padding: 15px 0;
      height: 100px;
      border-bottom: 1px solid #eee;
    }
    #content p {
      margin: 20px 10px;
    }
    .btn1 {
      float: right;
      margin-right: 10px;
      font-weight: bold;
      cursor: pointer;
    }
    .btn1:hover,
    .btn2 li:hover {
      color: #ccc;
    }
    .btn2 {
      list-style: none;
      float: right;
      height: 30px;
      line-height: 30px;
    }
    .btn2 li {
      float: left;
      margin-right: 10px;
      cursor: pointer;
    }
    .cover {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.4;
      background-color: #000;
    }
    .clearfix {
      content: '';
      display: block;
      clear: both;
    }
  </style>
</head>

<body>
  <button id="btn">点我1</button>
  <div class="cover"></div>
  <div id="ct">
    <div id="header">
      <h4>我是标题1</h4>
      <span class="btn1 clearfix">×</span>
    </div>
    <div id="content">
      <p>我是内容1</p>
      <p>我是内容2</p>
    </div>
    <div id="footer">
      <ul class="btn2 clearfix">
        <li>取消</li>
        <li>确定</li>
      </ul>
    </div>
  </div>
  <script>
    var ct = document.querySelector('#ct'),
        btn = document.querySelector('#btn'),
        btn1 = document.querySelector('.btn1'),
        btn2 = document.querySelector('.btn2'),
        cover = document.querySelector('.cover'),
        choose = btn2.children;
    function handler1() {
      ct.style.display = "none";
      cover.style.display = "none";
    }
    function handler2() {
      ct.style.display = "block";
      cover.style.display = "block";
    }
    btn.addEventListener('click', handler2);
    btn1.addEventListener('click', handler1);
    choose[0].addEventListener('click', handler1);
    cover.addEventListener('click', handler1);
  </script>
</body>

</html>

本文归饥人谷和本人所有，转载请注明来源，谢谢！

Dom、事件

Q&A：

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

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

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

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

5. 元素的添加、删除？

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

7. attachEvent与addEventListener的区别？

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

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

2. 补全代码，要求：

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

4. 实现如下图Tab切换的功能

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

猜你喜欢

热点阅读

Dom、事件

Q&A：

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

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

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

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

5. 元素的添加、删除？

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

7. attachEvent与addEventListener的区别？

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

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

2. 补全代码，要求：

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

4. 实现如下图Tab切换的功能

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

猜你喜欢

热点阅读

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