Dom操作知识点

• dom对象的innerText和innerHTML有什么区别？
  答：
  innerText是获取元素中的文本部分，若有多层嵌套，则以从浅到深的方式进行组合拼接内容。
  innerHTML是获取HTML中的文档结构，包括其中的所有标签。

• elem.children和elem.childNodes的区别？
  答：
  elem.children是获取父节点的所有标签子元素
  elem.childNodes是获取父节点下的所有内容，包括被父节点自身包裹的文本内容

• 查询元素有几种常见的方法？
  答：
  getElementById()通过id名去查询元素
  getElementsByClassName()通过类名去查询含该类名的所有元素
  getElementsByTagName()通过标签名去查询该标签的所有元素
  getElementsByName()通过标签所设置的name属性去获取元素
  querySelector()ES5的新增查询方法，可以在标签中输入以点、#开头或者直接标签名去查询对应id、class和标签的元素，返回的是具有该属性的第一个元素。
  querySelectorAll()和上面的querySelector()查询方法一致，不同的是它是查询所有元素

• 如何创建一个元素？如何给元素设置属性？
  使用createElement()创建一个元素的标签，生成一个html元素节点
  使用createTextNode()创建一个文本节点
  使用setAttribute()来给元素设置属性，其中传入两个值，第一个值为元素的属性名，第二个值是定义的值

• 元素的添加、删除？
  答：
  使用appendChild()将传入的元素添加到元素的末尾。
  使用 insertBefore()将元素插入到指定元素之前
  使用replaceChild()来替换元素，它接收两个参数，第一个是要插入的元素，第二个为要被替换的元素
  removeChild()是用来删除元素的，直接传入需要删除的元素即可

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
答：
DOM0事件是直接将事件以内联的方式写在HTML标签内部，比如：
<a href="#" onclick="console.log('clicked');">click</a>
这种方式定义的事件看起来书写方面，但是存在缺点：

1.存在加载时间差的问题，若是用户在其中的js部分还未加载完成时去点击，则不会触发事件
2.这样的写法让HTML和js的耦合太过于紧密，代码维护不方便，并且一个事件只能对应一个元素，代码没有复用性
DOM2事件：有两个方法addEventListener()和removeEventListener()
它们都接收三个参数，包括事件类型、事件处理方法和布尔值，默认布尔为false

attachEvent与addEventListener的区别？
答：
1.接收的参数数量不同：前者只接收事件类型和事件处理方法两个参数，而后者还需要接收布尔值来判断是在捕获阶段调用事件处理程序还是在冒泡阶段处理，而对于attachEvent()而言，由于IE只支持事件冒泡，所以添加的程序会被添加到事件冒泡阶段；addEventListener的第一个参数指的是事件类型，而attachEvent则是接收事件处理程序名称。
2.兼容性不同，IE并不支持addEventListener()，所以才有了attachEvent和removeEvent两个方法来处理。
3.作用域不同，后者的作用域在元素本身，所以在其中添加this指的是触发事件本身，而前者的作用域在全局变量内运行，this则指向window。
4.执行顺序不同：后者按照事件的先后添加顺序执行，而前者的执行则是不可预料的

• 解释IE事件冒泡和DOM2事件传播机制？
  答：
  IE事件冒泡：从发生事件的位置，一次向上冒泡，直到Document
  DOM2事件传播机制：首先进行事件捕获、找到目标之后再进行向上冒泡的操作。

如何阻止事件冒泡？ 如何阻止默认事件？
答：stopPropagation()取消事件进一步捕获和冒泡可以使用cancelable来查看默认时间是否可以被阻止，如果查询结果为true
，可以使用preventDefault()来阻止默认事件。