任务22-Dom、事件（进阶8,进阶9,进阶10）

作者: 饥人谷_桶饭 | 来源:发表于2017-01-19 13:51 被阅读0次

问答题

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

答：
innerText和innerHTML都是返回元素内容。
区别：innerText返回的是元素文本内容，innerHTML返回的内容包含HTML标签和文本内容。

    <ul id="inner">
    <li>A tin of beans</li>
    <li>Cheese</li>
    <li>Milk</li>
</ul>
<script type="text/javascript">

    var n = document.getElementById("inner");
    console.log(n.innerText);
    console.log(n.innerHTML);

</script>

Paste_Image.png

elem.children和elem.childNodes的区别？

答：
elem.children:获取指定元素的子元素列表，包含HTML元素节点。
elem.childNodes：获取指定元素的子元素列表，包含HTML元素节、文本节点、注释节点。

    <ul id="inner">
    <li>A tin of beans</li>
    <li>Cheese</li>
    <li>Milk</li>
</ul>
<script type="text/javascript">
    var n = document.getElementById("inner");
    console.log(n.children);
    console.log(n.childNodes);
</script>

Paste_Image.png

如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是文本节点，则 nodeType 属性将返回 3。

查询元素有几种常见的方法？
答：

getElementById()
返回匹配指定id属性的元素节点。如果没有找到匹配的节点返回null。

 ```
  <ul id="inner">
  <li>A tin of beans</li>
  <li>Cheese</li>
  <li>Milk</li>
  </ul>
  <script type="text/javascript">
  var n = document.getElementById("inner");
  console.log(n.children);
  console.log(n.childNodes);
  </script>
 ```

Paste_Image.png

getElementsByClassName()
返回一个类似数组的HTMLCollection对象，包括了所有class名字符合指定条件的元素，找不到返回一个空的类数组对象，还可以查找带有多个类名的元素，要指定多个类名，只要在参数中用空格分隔类名即可，这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

    <ul id="inner">
    <li>A tin of beans</li>
    <li>Cheese</li>◊
    <li class="abc">Milk</li>
</ul>
<ol>
    <li class="list">1</li>
    <li class="list">2</li>
    <li class="list">3</li>
</ol>
<div class="box box-1">abc</div>
<script type="text/javascript">
var n = document.getElementsByClassName("list");
console.log(n);
var m = document.getElementsByClassName("list1");
console.log(m);
var x = document.getElementsByClassName("box box-1");
console.log(x);
var i = document.getElementById("inner");
var k = i.getElementsByClassName("abc");
console.log(k);
</script>

![Paste_Image.png](https://img.haomeiwen.com/i2858982/8177d99a489594c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

     3. getElementsByTagName()
返回一个类似数组的HTMLCollection对象，包括所有指定标签的元素，找不到返回一个空的类数组对象，这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
 
    ```
    <ul id="inner">
        <li>A tin of beans</li>
        <li>Cheese</li>◊
        <li>Milk</li>
    </ul>
    <ol>
        <li class="list">1</li>
        <li class="list">2</li>
        <li class="list">3</li>
    </ol>
    <div class="box box-1">abc</div>
    <script type="text/javascript">
    var n = document.getElementsByTagName("li");
    console.log(n);
    var m = document.getElementsByTagName("p");
    console.log(m);
    var i = document.getElementById("inner");
    var k = i.getElementsByTagName("li");
    console.log(k);
    </script>

Paste_Image.png

 4.  getElementsByName()
    用于选择拥有name属性的HTML元素，返回一个类数组的对象（NodeList），找不到返回一个空的类数组对象。方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
    
    ```
    <form action="xxx" method="get">
    <input type="text" name="username">
    <input type="text" name="username">
    <input type="text" name="username">
</form>
<script type="text/javascript">
var n = document.getElementsByName("username");
console.log(n);
var m = document.getElementsByName("hobby");
console.log(m);
</script>
```

Paste_Image.png

 5. querySelector()

    返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
    
   ```
  <ul id="list">
  <li class="number">1</li>
  <li>2</li>
  <li>3</li>
   </ul>
   <p class="number">5</p>
   <script type="text/javascript">
   var n = document.querySelector("#list");
   console.log(n);
   var m = document.querySelector(".number");
   console.log(m);
   var x = document.querySelector("#header");
   console.log(x);
   </script>
   ```

Paste_Image.png

 6. querySelectorAll()

    返回匹配指定的CSS选择器的所有节点，返回的是类数组的对象（NodeList），querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素,找不到返回一个空的类数组对象。
    
    ```
        <ul id="list">
        <li class="number">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p class="number">5</p>
    <div class="main"></div>
    <h1 class="header"></h1>
    <script type="text/javascript">
    var n = document.querySelectorAll("#list");
    console.log(n);
    var m = document.querySelectorAll(".number");
    console.log(m);
    var x = document.querySelectorAll("#header");
    console.log(x);
    var k = document.querySelectorAll(".main,.header");
    console.log(k);
    </script>
    ```

Paste_Image.png

 7. elementFromPoint()
 方法返回位于页面指定位置的元素。如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。
 
 ```
 <script type="text/javascript">
    var n = document.elementFromPoint(0,0);
    console.log(n);
    var m = document.elementFromPoint(-10,-10);
    console.log(m);
</script>
```

Paste_Image.png

如何创建一个元素？如何给元素设置属性？
答：
创建元素：document.createElement('Tagname')
设置属性：setAttribute(‘属性名’, ‘属性值’)
```
var link = document.createElement('a');
link.setAttribute('href','#');
```

元素的添加、删除？

答：
元素添加：
father.appendChild(new); 是在父元素节点的最后添加。

<div>
<p>
123
<span>456</span>
</p>
</div>
<script>
var p = document.querySelector('p');
var link = document.createElement('a');
link.setAttribute('href','#');
p.appendChild(link);
</script>
```

Paste_Image.png

father.insertBefore(new,tag); 是在父元素中的目标节点前添加。

```

<div>
<p>
123
<span>456</span>
</p>
</div>
<script>
var p = document.querySelector('p');
var link = document.createElement('a');
var div = document.querySelector('div');
link.setAttribute('href', '#');
div.insertBefore(link, p);
</script>
```

Paste_Image.png

元素删除：father.removeChild(tag); 在父元素中删除指定的目标节点元素。

```
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script type="text/javascript">
var a = document.getElementsByTagName("ul")[0];
a.removeChild(a.children[1])
</script>

</body>

![Paste_Image.png](https://img.haomeiwen.com/i2858982/f33325ce7e29cb07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



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

    答：
    1. DOM0 事件监听器无法处理多个事件（当在同一个元素上再添加一个监听事件时会覆盖之前的事件方法），DOM2 级事件监听器可以处理多个事件（事件列表）。
    2. DOM2 级 (addEventListener()) : 可以选择在捕获阶段触发事件或者在冒泡阶段触发事件。DOM0 无法选择。
    3. DOM0 不存在兼容性问题，DOM2 在 IE8 之前不支持。（ IE 使用attachEvent(‘click’, func) ）

* attachEvent与addEventListener的区别？

    答：
    * attachEvent是老版本IE浏览器上监听事件的方法，接受两个参数，第一个参数是事件类型，格式为”on+type”(onclick),第二个参数是事件处理程序函数。事件处理程序只能发生在冒泡阶段。
    * addEventListener是现代大多数逐渐主流浏览器（Chrome,firefox,safari）监听事件的方法，接受三个参数，第一个参数时事件类型，格式为”type”(click),第二个参数是事件处理程序函数，第三个参数是布尔值,默认为false(冒泡事件),true为捕获阶段事件。


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

    答：
    * IE事件冒泡：事件发生后先从具体的接收元素，然后逐步向上传播到不具体的元素。
![Paste_Image.png](https://img.haomeiwen.com/i2858982/b1c4fb664e77853f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    * DOM2事件传播机制：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。
![Paste_Image.png](https://img.haomeiwen.com/i2858982/18f8396c9d5fbcd8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



* 如何阻止事件冒泡？ 如何阻止默认事件？

    答：
    * 如何阻止事件冒泡：

        ```
        function stopPropagation(e) {
        if (e.stopPropagation)
        e.stopPropagation();
        else
        e.cancelBubble = true;//兼容IE浏览器
        }
        ```
        
        ```
        //没有阻止事件冒泡
        <body>
    <div id="box">
            <button id="btn">点我</button>
    </div>
    <script type="text/javascript">
        var box = document.querySelector("#box");
        var fun = function(){
            console.log(this.id);
        }
        var btn = document.querySelector("#btn");
        var fun1 = function(e){
            console.log('hello');
        }
        box.addEventListener('click',fun,false);
        btn.addEventListener('click',fun1,false);
    </script>
</body>
        ```
![Paste_Image.png](https://img.haomeiwen.com/i2858982/4a71f54829bb1929.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

         ```
  <body>
      <div id="box">
              <button id="btn">点我</button>
      </div>
      <script type="text/javascript">
          var box = document.querySelector("#box");
          var fun = function(){
              console.log(this.id);
          }
          var btn = document.querySelector("#btn");
          var fun1 = function(e){
              console.log('hello');
              e.stopPropagation();
          }
          box.addEventListener('click',fun,false);
          btn.addEventListener('click',fun1,false);
      </script>
  </body>
         ```
  ![Paste_Image.png](https://img.haomeiwen.com/i2858982/a6781952a43d7069.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    * 阻止默认事件

        ```
    function preventDefault(e) {
    if (e.preventDefault)
       e.preventDefault();
    else
       e.returnValue = false;//兼容IE浏览器
    }
    ```

#代码题

任务22-Dom、事件（进阶8,进阶9,进阶10）

问答题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客