关于DOM和事件

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

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

可以看一下以下例子

innerHTML和innerTest的区别.png

demo得出的结论

• innerHTML返回的是HTML结构。通俗说就是起始位置到终止位置的全部内容,包括Html标签i
• innerText是从起始位置到终止位置的内容,但它去除Html标签**

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

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

demo:

e.children和e.childNodes区别.png

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

• getElementById 返回匹配指定ID属性的元素节点如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法;
• getElementsByClassName 返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。注意，返回的是数组
• getElementByTagName 方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。(如

  ) 它返回的也是一个数组.

• querySelector返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。实时反映元素的变化。 (这个id,class都能查找匹配）
• querySelectorAll()方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

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

创建元素: document.creatElement('元素名')
设置属性:e.setAttribute('属性的名称','属性')

5.元素的添加、删除？

• 添加: p.appendChild('需要添加的') //意思是在列表（p）末尾添加需要添加元素
• 删除: p.removeChild(`删除的元素`) //意思是在列表（p）删除需要删除的元素
• 替换p.replaceChild('替换的元素','要替换的元素')//意思是列表（p）里，把一个元素替换

demo:

创建元素、给元素设置属性、添加元素、删除元素、替换元素.png

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

• DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数，就可以指定事件处理程序。（通俗说，就是一个事件一次只能绑定一次）
• DOM2级事件监听定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener、removeEventListener。所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
  • 事件类型
  • 事件处理方法
  • 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理这个可以参考addEventListener的第三个参数

DOM二级的形式是addEventListener('事件类型',function(),false(true))

demo:

dom0级和dom2级.png

dom0级和dom2级.png

可以看出，他们区别在于，DOM0添加新的事件方法时，老方法将被新方法所覆盖，而DOM2级可以多次绑定

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事件冒泡是指事件开始时由具体的元素接受，然后逐级向上传播到较为不具体的节点。就像泡泡一样从水底向上传播。 (通俗说就是，细到粗)

Paste_Image.png

Paste_Image.png

• DOM2事件传播机制：事件从顶层节点一级一级往下层传播，接着到达目标节点，这部分叫做时间捕获阶段（由外往内传递）。然后事件又从目标节点逐层往上层节点传播，这部分叫做事件冒泡（由内向外传递）

Paste_Image.png

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

• 阻止事件冒泡:
  DOM:e.stopPropagation();
  IE:**e.cancelBubble = true **
• 阻止默认事件:
  DOM：event.preventDefault();
  IE: event.returnValue = false;（该属性默认为true）

实例####

代码1
代码1
代码3
代码4
代码5