问答

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

• innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅入深的顺序拼接其内容；当写入新内容时会覆盖掉其内部所有内容，此时输入的内容为文本格式，即使有HTML标签也会当成文本。
• innerHTML的属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结果，在写入的时候也会自动构建DOM。
  <pre>
  <div id="content">
  <p>123 <span>456</span> </p>
  </div>
  <script>
  var div = document.getElementById("content");
  </script>
  </pre>

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

• elem.children： 只获取子元素相应的元素部分（Elements类型），非元素部分如：Text类型（比如空格、文字）、Comment类型等它不获取，它属于HTML Collection（元素的集合）。
• elem.childNodes：不仅获取元素部分（Elements类型），还获取非元素部分如：Text类型、Comment类型等，它属于NodeList（节点的集合）。
  如：

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

• getElementById()：该方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。

• getElementsByClassName()：该方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

• getElementsByTagName()：该方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

• getElementsByName()：该方法用于选择拥有name属性的HTML元素。
  返回一个NodeList格式的对象，不会实时反映元素的变化。

• querySelector()：该方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

• querySelectorAll()：该方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

• elementFromPoint()：该方法返回位于页面指定位置的元素。

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

• document.createElement()方法可以创建新的HTML元素节点；要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在已有的子节点前插入一个新的子节点。
  document.createTextNode()方法可以用来创建新的文本节点，参数为所要生成的文本节点的内容；
• setAttribute()方法用于设置元素属性，里面传入两个参数，第一个参数为元素的属性名，第二个参数为定义的值。

5. 元素的添加、删除？

• 元素的添加：
• appendChild()：让指定元素成为某个现有元素的最后一个子元素。
  语法表示：parent.appendChild(child);
• insertBefore()：让指定的元素插入到某个现有元素的前面。
  语法表示：parentElement.insertBefore(newElement,targetElement)；
• 元素的删除：
  removeChild()：删除某个元素，不过要注意的地方是，该方法不是在待删除的元素上调用，而是在其父元素上调用。
  语法表示：parent.removeChild(child)

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

• DOM0 级事件处理程序通过JS制定事件处理程序的传统方法，将一个函数赋值给一个事件处理程序属性进行事件监听；DOM2 级事件处理程序是通过定义了addEventListener()和removeEventListener()来进行事件监听；
• DOM0事件处理程序不能添加多个事件处理程序，而DOM2级事件处理程序可以；
• DOM2事件可以选择在捕获阶段还是冒泡阶段进行监听器触发，DOM0视浏览器设置而定；

7. attachEvent与addEventListener的区别？

• 参数个数不同：addEventListener有三个参数，attachEvent值有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段；addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段（我们一般为了浏览器兼容性都设置为冒泡阶段）
• 第一个参数意义不同：addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
• 事件处理程序的作用域不同：addEventListener的作用域是元素本身，this指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window
• 为一个事件添加多个事件处理程序时，执行顺序不同：addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律（添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了）

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

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

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

• 阻止事件冒泡：
• DOM事件对象中：event.stopPropagation()；
• IE事件对象中：event.cancelBubble = true；
• 阻止默认事件：
• DOM事件对象中：当cancelable属性为true时，可以使用event.preventDefault();
• IE事件对象中：event.returnValue = false;

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