JS Dom、事件

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

innerText：元素内的文本内容，不包括标签。设定innerText值时即便输入的内容是HTML标签，也会以文本形式显示。安全性比使用innerHTML显示用户输入的内容要高。
innerHTML：元素内所有内容，包括HTML标签和文本内容。设定innerHTML值时如果输入的内容中包含HTML标签，则会以HTML形式解析。

    <p>innerText<span>与</span>innerHTML</p>
    <script>
    document.getElementsByTagName("p")[0].innerText;//"innerText与innerHTML"
    document.getElementsByTagName("p")[0].innerHTML;//"innerText<span>与</span>innerHTML"
    </script>

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

elem.children只会返回以HTML标签形成的节点。
elem.childNodes会返回包括文本，注释在内的所有节点。使用时容易出现问题，因此多用elem.children。

elem.children和elem.childNodes的区别.PNG

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

getElementById()：查询含指定id的元素节点，返回单个对象。
getElementsByClassName()：查询含指定class的元素节点，返回所有符合条件的元素节点组成的类数组对象。
getElementsByTagName()：查询标签为指定tag的元素节点，返回所有符合条件的元素节点组成的类数组对象。
getElementsByName()：查询name属性值为指定name的元素节点，返回所有符合条件的元素节点组成的类数组对象。
querySelector()：查询匹配指定的CSS选择器的元素节点。返回第一个符合条件的对象。
querySelectorAll()：返回所有符合条件的元素组成的类数组对象。

如何创建一个元素？##

创建HTML元素节点：var newDiv = document.createElement("div");
创建文本节点：var newContent = document.createTextNode("Hello");

如何实现元素的添加、删除、修改、复制？##

在元素末尾添加：

  var newDiv = document.createElement('div')
  var newContent = document.createTextNode('hello')
  newDiv.appendChild(newContent)

在某个元素之前添加：

  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("Hello");
  newDiv.insertBefore(newContent, newDiv.firstChild);

元素的删除：
parentNode.removeChild(childNode)
元素的修改：
newDiv.replaceChild(newElement, oldElement);
元素的复制：
node.cloneNode(true);
复制的为新元素,不是原来DOM对象,参数为false的时候只复制元素本身,而不复制子元素

如何实现属性的获取、添加、删除？##

属性的获取：node.getAttribute('id');
属性的添加：

  var node = document.getElementById("div1");
  node.setAttribute("my_attrib", "newVal");

或者

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

属性的删除：node.removeAttribute('id');

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

DOM0 事件的监听直接在元素上进行定义，并且一次只能添加执行一个处理程序：elem.onclick = function(){};
DOM2级通过绑定事件和处理程序进行定义，并且可以为事件添加多个处理程序；且可以设定处理程序是在捕获阶段处理还是冒泡阶段处理：

  elem.addEventListener("click", function(){console.log(this);});
  elem.addEventListener("click", function(e){console.log(e.target);}, true);

attachEvent与addEventListener的区别？##

1、兼容性：IE不兼容addEventListener，但支持attachEvent；
2、参数：addEventListener接收3个参数（类型、函数、布尔值），attachEvent接收2个（类型、函数，只支持事件冒泡）；
3、类型名称：比如addEventListener接收的类型为click，而attachEvent接收的则是onclick；
4、移除函数：addEventListener的移除方法是removeEventListener，而attachEvent的移除方法是detachEvent；
5、作用域：addEventListener的作用域是元素本身，this指的是触发元素，而attachEvent的作用域是全局，this指的是window；
6、事件处理程序的执行顺序：addEventListener按照添加顺序执行，而attachEvent顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律)。

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

IE事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
DOM2事件传播：分事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

三种传播机制.PNG

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

要阻止事件冒泡，可以使用e.stopPaopagation()方法，停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。
要阻止事件的默认行为，可以使用e.preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为

  document.getElementsByTagName('a').onclick = function (e) {
      e.preventDefault();
  }