本教程版权归小圆和饥人谷所有，转载须说明来源

问答

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

innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容。
innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM。

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

elem.children属性返回一个HTMLCollection集合，只包括HTML元素节点。
elem.childNodes属性返回一个NodeList集合，成员包括当前节点的所有子节点。除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。

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

getElementsByID()方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法;
getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByTagName()方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByName()方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会
querySelector()方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。实时反映元素的变化。
querySelectorAll()方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementFromPoint()方法返回位于页面指定位置的元素。

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

创建一个元素可使用createElement()方法。参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

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

给元素设置属性可使用setAttribute()方法。如果同名属性已存在，则相当于编辑已存在的属性。

var node = document.getElementById("div");
node.setAttribute("myname","div1");

5. 元素的添加、删除？

添加：
appendChild()方法向节点添加最后一个子节点。

<ul id="list">
      <li>red</li>
      <li>green</li>
</ul>

 var newNode = document.createElement("li");    //创建一个新节点
var newText = document.createTextNode("blue");    //创建一个新文本
newNode.appendChild(newText);    //将新文本添加为新节点的子节点
var list = document.getElementById("list");    //获取列表

 list.appendChild(newNode);    //将新节点添加为列表的最后一个子节点

输出

insertBefore()方法在指定的已有子节点之前插入新的子节点。

<ul id="list">
     <li>red</li>
     <li>green</li>
</ul>

var newNode = document.createElement("li");    //创建一个新节点
var newText = document.createTextNode("blue");    //创建一个新文本
newNode.appendChild(newText);    //将新文本添加为新节点的子节点
var list = document.getElementById("list");    //获取列表

list.insertBefore(newNode,list.childNodes[0]);    //将新节点添加为列表的第一个子节点

输出

删除：
removeChild方法即可删除元素。

<ul id="list">
  <li>red</li>
  <li>green</li>
  <li>blue</li>
</ul>

var list = document.getElementById("list");
list.removeChild(list.childNodes[0]);

输出

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

DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数，就可以指定事件处理程序。

<a href="#" class="click">click Here</a>

 var btn = document.getElementById("click");    //获取元素
btn.onclick = function() {    //将元素的事件处理程序属性的值设置一个函数
    alert("Surprised!");    //当点击元素时会触发这个事件
};

DOM2级事件监听定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener、removeEventListener。所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

• 事件类型
• 事件处理方法
• 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

<a href="#" class="click">click Here</a>

var btn = document.getElementById("click");    //获取元素
btn.addEventListener('click', function () {    //处理指定事件处理程序
    alert(this.id);
},false);    //在事件冒泡阶段处理

两者差异在于DOM2可以拥有无数个click事件的方法，当click触发时，同时所有的方法都能使用；而给DOM0添加新的事件方法时，老方法将被新方法所覆盖

7. attachEvent与addEventListener的区别？

• 参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

• 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

• 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

• 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

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

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。

事件冒泡模型

DOM2级事件：规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

DOM事件流

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

阻止事件冒泡：

• DOM事件对象：event.stopPropagation();
• IE事件对象：event.cancelBubble = true; （该属性默认为false）

阻止默认事件：

• DOM事件对象：event.preventDefault();
• IE事件对象：event.returnValue = false;（该属性默认为true）