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();
}
