DOM、事件

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

  <div id="test"> 
    <span style="color:red">test1</span> test2
  </div>
  <script>
    var test = document.getElementById("test");
  </script>

• innerHTML返回的是从对象起始位置到终止位置的全部内容，包含HTML标签。
  上例中test.innerHTML的值是“<span style="color:red">test1</span> test2”
• innerText返回的是从对象起始位置到终止位置的所有文本内容，不包含HTML标签。
  上例中test.innerText的值是“test1 test2”

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

• elem.children返回当前元素的所有子元素节点的集合
• elem.childNodes返回当前元素的所有子节点的集合，包含元素节点、属性节点和文本节点

elem.children和elem.childNodes的区别是，elem.children只包含HTML元素类型的子节点，不包含其他类型的子节点。
可用nodeType来判断节点类型，当nodeType==1时是元素节点，2是属性节点，3是文本节点

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

• getElementById()：返回匹配指定ID属性的元素节点。
• getElementByClassName()：返回className符合指定条件的所有元素的集合。
• getElementByTagName()：返回所有指定标签的元素集合。
• getElementByName()：用于选择拥有name属性的HTML元素,比如form、img、frame、embed和object,返回所有满足条件的元素集合。（在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。）
• querySelector()：返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。
• querySelectorAll()返回匹配指定的CSS选择器的所有节点的集合。

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

• 创建元素：var element = document.creatElement(元素名)
• 给元素设置属性：元素节点.setAttribute(属性名, 值)

五、元素的添加、删除

• 在元素末尾添加元素：appendChild(新节点)
  将新节点插入到当前结点末尾作为最后一个子节点
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hello");
  newDiv.appendChild(newContent);
• 在某个元素之前插入元素：insertBefore(新节点, 参照子节点)
  将新节点插入当前结点的某个子节点前面
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hello");
  newDiv.insertBefore(newContent, newDiv.firstChild);
• 删除元素：node.removeChild()
  删除当前结点的某个子节点

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

• DOM0事件处理程序
  每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，如onclick，将这种属性赋值为一个函数，就是DOM0 级事件处理程序的指定方式。如下：
  var btn = document.getElementById('myBtn'); // 取得对操作对象的引用
  btn.onclick = function () { // 为onclick赋值一个函数，指定事件处理程序
  console.log('hello');
  }
  移除事件处理程序：
  btn.onclick = null; // 只需将属性置空
  特点：

  • 添加事件处理程序的代码只有在运行完之后才会为元素绑定事件处理程序，因此如果该段代码为执行，单击按钮是没有反应的
  • 事件处理程序中的this引用当前元素，级绑定了该事件的元素
  • 以这种方式添加的事件处理程序会在事件的冒泡阶段被处理
  • 所有浏览器都支持DOM0级事件处理程序

• DOM2级事件处理程序
  DOM2级事件处理程序定义了两个方法，用来指定和删除事件处理程序：addEventListener()和removeEventListener()。这两个方法都接受三个参数：要处理的事件类型、作为事件处理程序的函数、一个布尔值。这个布尔值参数如果为true表示在事件捕获阶段调用事件处理程序，为false表示在事件冒泡阶段调用事件处理程序，一般设为false。
  添加事件处理程序：
  var btn = document.getElementById('myBtn'); // 取得对操作对象的引用
  btn.addEventListener('click', function(){ // 注意是 click 哦~
  console.log('hello');
  }, false);
  或
  function show() {
  console.log('hello');
  }
  var btn = document.getElementById('myBtn'); // 取得对操作对象的引用
  btn.addEventListener('click', show, false);
  移除事件处理程序：
  移除事件处理程序有一个要求就是：移除时传入的参数必须与添加事件处理程序时使用相同的参数。从而通过addEventListener()添加的匿名函数将无法移除。
  移除上面第二种方式绑定的事件处理程序代码：
  var btn = document.getElementById('myBtn'); // 取得对操作对象的引用
  btn.removeEventListener('click', show, false);
  通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除。

特点：

• 只有运行完addEventListener()才会为元素绑定事件处理程序
• 事件处理程序的this引用当前元素，即绑定了当前事件的元素
• 通过设置第三个参数为true或false可以设定在捕获阶段还是冒泡阶段调用事件处理程序
• 可以为同一元素的同一事件绑定多个事件处理程序，绑定的事件处理程序会按照他们添加的先后顺序依次触发（DOM0级只能添加一个事件处理程序，后添加的会覆盖先添加的）
• IE9、Firefox、Safari、Chrome和Opera都支持DOM2 级事件处理程序。

七、attachEvent与addEventListener的区别？

1. 参数及绑定阶段不同：

* 参数个数不同：`addEventListener()`有3个参数，`attachEvent()`有2个参数；
* `attachEvent()`事件处理程序只能绑定在事件冒泡阶段，`addEventListener()`可以通过其第三个参数设定为`true`或`false`来决定事件处理程序绑定在冒泡还是捕获阶段；
* 第一个参数意义不同：`addEventListener()`第一个参数是事件类型（如`click`、`load`），`attachEvent()`第一个参数是事件处理函数名称（如`onclick`、`onload`）

2. 事件处理程序的作用域不同，addEventListener()作用域是元素本身，this指触发元素；attachEvent()在全局作用域中运行，this指window
3. 在同一事件上绑定多个事件处理程序时执行顺序不同，addEventListener()是以添加他们的顺序执行，attachEvent()执行顺序是无序的

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

• IE事件冒泡
  接收事件的顺序是：事件开始由具体的元素接收，然后逐级向上传播到较为不具体的节点。

  如果页面中有个div，点击了div之后，事件的传播顺序如下：
  （1）div
  （2）body
  （3）html
  （4）document

  事件冒泡过程图如下：

所有现代浏览器都支持事件冒泡，而且IE9，Firefox、Chrome、Safari都将事件一直冒泡到window
对象。

• DOM2事件传播机制
  事件传播包含三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
  如下图：

捕获阶段包括1、2、3，冒泡阶段包括4、5、6、7，其中4是处于目标阶段，在事件处理中被看成是冒泡阶段的一部分

虽然“DOM2级事件”规定捕获阶段不涉及事件目标，但是IE9，Firefox、Chrome、Safari和Opera9.5及以上版本都会在捕获阶段触发事件对象上的事件，这就意味着有两个机会在目标对象上面操作事件。

IE9，Firefox、Chrome、Safari、Opera都支持“DOM2级事件传播机制”，IE8及更早版本不支持“DOM2级事件传播机制”。即IE9，Firefox、Chrome、Safari、Opera既支持冒泡又支持捕获，而IE8及以前版本仅支持冒泡。

需要说明的是，在实际中，大多数都使用冒泡事件，仅在有特殊需要时才使用捕获事件。

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

• DOM中的事件对象（两个方法）
  • preventDefault()方法用来取消事件默认行为
  • stopPropagation()方法用来阻止事件进一步捕获或冒泡
    // 假设事件对象传入给参数event
    event.preventDefault(); // 取消事件默认行为
    event.stopPropagation(); // 阻止事件进一步捕获或冒泡
• IE8及以下中的事件对象（两个属性）

  • returnValue属性用来设置事件的默认行为。默认值为true，当设置为false时，就会取消事件的默认行为。

  • cancelBubble属性用来取消事件冒泡。默认值为false，当设置为true时，就会阻止事件冒泡

    event.returnValue = false; // 取消事件的默认行为  
    event.cancelBubble = true; // 阻止事件冒泡
    

注：这两个属性仅IE8及以下版本支持，IE9+使用这两个属性会报错。

---

本文版权属吴天乔所有，转载务必注明出处。