1，dom对象的innerText和innerHTML有什么区别？
- innerText是将对象中的字符串过滤组合展示；而innerHTML则是将对象中的所有内容都进行展示；
- 对于链接，innerHTML会将其保留连接属性，而innerText则会将链接转化为字符串；
2，elem.children和elem.childNodes的区别？
elem.children：非标准型，它返回指定元素的子元素集合。只返回HTML节点。
-
elem.childNodes：标准型，返回指定元素的子元素集合，包括HTML属性，所有属性，文本。可以通过nodeType来判断是那种类型的节点,当nodeType==1时时元素节点，2是属性节点，3是文本节点。
<html> <head> <meta charset="utf-8"> </head> <body> <div id = "part"> <p class="part1">段落二<a href=" http://www.baidu.com ">我是链接</a></p> <p class="part2">段落三</p> </div> </body> <script> var parts = document.getElementById("part") parts.children // [p.part1, p.part2] parts.childNodes // [text, p.part1, text, p.part2, text] </script> </html>
3，查询元素有几种常见的方法？
document节点获取
document.getElementById(' ')：
返回匹配指定ID属性的元素节点.如果没有发现匹配的节点，则返回null。
document.getElementsByClassName(' ')：
返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中.这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用;
document.getElementsByTagName(' ')：
返回所有指定标签的元素（搜索范围包括本身）.返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中.这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用;
document.querySelector('')：
返回匹配指定的CSS选择器的元素节点.如果有多个节点满足匹配条件，则返回第一个匹配的节点.如果没有发现匹配的节点，则返回null;
document.querySelectorAll()：
返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象.NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中;
document.getElementsByName()：
方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
document.elementFromPoint(x, y)：
elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回nul
父元素节点获取：
parentNode
parentElement
兄弟节点获取：
nextSibling
previousSibling
通过子节点获取：
childNodes
firstChild
lastChild
4，如何创建一个元素？如何给元素设置属性？
创建元素：
document.createElement(''):
createElement方法用来生成HTML元素节点。
document.createTextNode(''):
createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
document.DocumentFragment():
createDocumentFragment方法生成一个DocumentFragment对象。DocumentFragment对象是一个存在于内存的DOM片段，但是不
属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，
对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
属性操作：
getAttribute():getAttribute()用于获取元素的attribute值
createAttribute():createAttribute()方法生成一个新的属性对象节点，并返回它setAttribute():setAttribute()方法用于设置元素属性
removeAttribute():removeAttribute()用于删除元素属性
5，元素的添加、删除？
appendChild（）：在元素末尾添加元素；
insertBefore（）：在某个元素前插入元素；
replaceChild（）：替换某个元素（要插入的元素，要替换的元素）；
removeChild（）：删除元素；
举例：
<body>
<div id="part">
<p class="part1">段落一<a href="#">我是链接</a></p>
</div>
<script>
var p = document.createElement('p');
document.body.appendChild(p); //在body最后添加了<p></p>;
添加div，给div添加class，添加内容为hello：
<div class=wrap></div>
var node = document.createElement('div');
node.setAttribute('class','d');
node.innerHTML = "hello";
wrap.appendChild(node);
6，DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
-
DOM0
DOM0在事件监听使用方式上，采用HTML内链方式，即通过onclick 写在HTML标签里的事件<a href="#" onclick="console.log('clicked');">点我</a> 或者： <div id="ct"> <a class="button" href="#">点我</a> </div> <script> document.querySelector(".button").onclick = function(e){ console.log('click me...'); console.log(this.innerText); console.log(e); }
这种写法的缺点是不利于日后维护，代码只能使用一次，不可以重复使用。
-
DOM2
DOM2事件有两种方法：addEventListener()和removeEventListener()。他们都返回三个参数，分别是：事件类型、事件处理方法、布尔值（默认为false，false是冒泡阶段处理，true是调用阶段处理）。<div id="ct"> <a class="button" href="#">点我</a> </div> <script> document.querySelector("#ct").addEventListener('click', function(){ console.log(this); console.log('in ct...'); },false);
7，attachEvent与addEventListener的区别？
适用的浏览器不同：
addEventListener适用于现代浏览器（非低版本IE浏览器）；
attachEvent是最低版本IE浏览器的私有方法；参数和触发阶段不同：
addEventListener有三个参数，分别是事件类型，事件处理方法，布尔值，其中布尔值可以定义处理方式在捕获/冒泡阶段触发；
true表明该事件监听器绑定在捕获阶段（和目标阶段），false则表明绑定在冒泡阶段（和目标阶段）且false是被默认的选项。第一个参数的形式不同：
addEventListener的第一个参数是click;
attachEvent的第一个参数是onclick;this不同：
addEventListener中的this是触发事件的元素；
attachEvent的this指代的是window；在同一个事件上绑定多个事件处理程序时的执行顺序不同：
addEventListener会按照添加顺序并按照布尔值执行；
attachEvent的执行是无序的；
8，解释IE事件冒泡和DOM2事件传播机制？
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="ct">
<a class="button" href="#">点我</a>
</div>
</body>
<script>
document.querySelector(".button").onclick = function(e){
console.log('click me...');
console.log(this.innerText);
console.log(e);
}
document.querySelector("#ct").addEventListener('click', function(){
console.log(this);
console.log('in ct...');
});
</script>
</html>
-
IE事件冒泡：
IE事件冒泡是事件由第一个被触发的元素接收，然后逐级向上传播。
DOM2的事件传播机制：
DOM2事件传播，事件由最外层元素接收，然后逐层向内传播，这个过程为捕获阶段，当达到目标元素时，处于目标阶段，然后事件由目标元素向最外层开始传递，这个过程称之为冒泡阶段。
捕获阶段：
9，如何阻止事件冒泡？ 如何阻止默认事件？
常规浏览器：
-
阻止事件冒泡：stopPropagation( )
<body> <a id="btn" href="http://www.baidu.com">点我</a> <script> var btn = document.querySelector("#btn"); btn.addEventListener('click',function(e){ console.log('at btn...',e); e.stopPropagation(); //阻止事件冒泡函数 }) document.body.addEventListener("click",function(e){ console.log('at body...',e); }) </script>
当执行到a链接时，事件就会被阻止在a链接处，不会传到body上。
-
阻止默认事件：preventDefault( )
<body> <a id="btn" href="http://www.baidu.com">点我</a> <script> var btn = document.querySelector("#btn"); btn.addEventListener('click',function(e){ console.log('at btn...',e); e.preventDefault(); //阻止默认事件函数 }) document.body.addEventListener("click",function(e){ console.log('at body...',e); }) </script>
当点击a链接时，由于a链接默认会跳转，e.preventDefault()阻止了a链接的跳转。
IE浏览器：
-
阻止事件冒泡：
<body> <a id="btn" href="http://www.baidu.com">点我</a> <script> var btn = document.querySelector('#btn'); btn.attachEvent('onclick',function(e){ console.log('at btn...',e); e.cancelBubble = true; //默认为false，设置为true后可以取消事件冒泡 }) </script> </body> -
阻止默认事件：
<body> <a id="btn" href="http://www.baidu.com">点我</a> <script> var btn = document.querySelector('#btn'); btn.attachEvent('onclick',function(e){ console.log('at btn...',e); e.returnValue = false; //默认为true，设置为false后可以取消事件默认行为 }) </script> </body>
