问答
1.dom对象的innerText和innerHTML有什么区别？
- innerText:获取到当前节点的文本内容不代标签
- innerHTML:返回元素的html结构，带标签
2.elem.children和elem.childNodes的区别？
- elem.children:获取html的子节点,返回一个HTMLCollection集合
- elem.childNodes:获取所有子节点,返回一个NodeList集合,除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。
3.查询元素有几种常见的方法？
- getElementById 返回匹配指定ID属性的元素节点如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法;
- getElementsByClassName 返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。注意，返回的是数组
- getElementByTagName 方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。(如
<a> <p>) 它返回的也是一个数组. - querySelector返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。实时反映元素的变化。 (这个id,class都能查找匹配）
- querySelectorAll()方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
4.如何创建一个元素？如何给元素设置属性？
- 用document.createElement('元素名')来生成html元素节点
var newDiv=document.createElement("div");
- 用setAttribute()给元素设置属性，里面传入两个值，第一个值为元素的属性，第二个值为定义的值。
var node = document.getElementById("wrap");
node.setAttribute("class","head");
5.元素的添加、删除？
- (1) 在元素末尾添加元素:appendChild();
<ul id="list">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<script>
var node=document.createElement("li");//创建一个元素节点
text=document.createTextNode("列表4");//创建一个新文本
node.appendChild(text);//将创建的新文本添加到元素节点的底部
list=document.getElementById("list");//获取到列表
list.appendChild(node);//将新节点添加为列表的最后一个子节点
</script>
- (2)在某个元素之前插入元素：insertBefore(新节点, 参照子节点)
将新节点插入当前结点的某个子节点前面
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Welcome");
newDiv.insertBefore(newContent, newDiv.firstChild);
- 在父元素上调用用来删除子元素:removeChild();删除当前结点的某个子节点
6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
- DOM0
DOM0事件就是通过onclick写在HTML标签里的事件
<a href="#" onclick="console.log('clicked');">点我</a>
这种写法的缺点是不利于日后维护，代码只能使用一次，没有复用性。
- DOM2
DOM2事件有两种方法一个是addEventListener()和removeEventListener() 它们都返回三个参数分别是事件类型、事件处理方法和布尔值默认为false，false是冒泡阶段处理，如果是ture就是在调用阶段处理。
<input id='btn' type="button" name="name" value="点我啊" />
<script>
var btn = document.querySelector("#btn")
btn.addEventListener("click",function(){
console.log("北京欢迎你")
},false)
</script>
7.attachEvent与addEventListener的区别？
- 适用的浏览器不同：
addEventListener适用于现代浏览器
attachEvent是低版本IE浏览器的私有方法 - 参数和触发阶段不同:
addEventListener有三个参数，最后一个参数可以定义处理程序在捕获/冒泡阶段触发
attachEvent只有两个传递参数，只能在冒泡阶段触发 - 第一个参数的形式不同：
addEventListener的第一个参数是click
而attachEvent的第一个参数是onclick - this不同:
addEventListener中的this是触发事件的元素
attachEvent的this指代的是window - 在同一个事件上绑定多个事件处理程序时的执行顺序不同 addEventListener会按添加顺序并按照第三个参数执行
而 attachEvent 的执行是无序的
8.解释IE事件冒泡和DOM2事件传播机制？
- IE事件冒泡是事件由第一个被触发的元素接收，然后逐级向上传播.
- DOM2事件传播，事件由最外层元素接收，然后逐层向内传播，这个过程为捕获阶段，当达到目标元素时，处于目标阶段，然后事件由目标元素向最外层开始传递，这个过程称之为冒泡阶段.
9.如何阻止事件冒泡？ 如何阻止默认事件？
- e.stopPropagation();阻止事件冒泡,ie中则用cancelBubble()
- e.preventDefault();阻止默认事件,ie中需要把returnValue设为 false
