任务22 DOM、事件

dom对象的innerText和innerHTML有什么区别？
innerText:获取节点里的所有文本；
innerHTML:获取节点里的所有信息；

elem.children和elem.childNodes的区别？
elem.children:获取元素的所有子节点dom对象，不包含自身的文本内容；
elem.childNodes:获取元素的所有子节点对象，包含自身的文本内容；
elem.childNodes:会把子节点和父标签间的空格当作文本内容；

查询元素有几种常见的方法？
getElementByID():返回匹配指定ID属性的元素节点;

getElementsByClassName():返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身）;

getElementsByTagName():返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象;

getElementsByName():用于选择拥有name属性的HTML元素，返回一个NodeList格式的对象

querySelector():返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点;

querySelectorAll():返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象;

如何创建一个元素？如何给元素设置属性？
创建元素有3种方法：
createElement方法用来生成HTML元素节点;
createTextNode方法用来生成文本节点;
createDocumentFragment方法生成一个DocumentFragment对象;

给元素设置属性：
setAttribute用来设置元素节点属性。

元素的添加、删除？
元素添加：appendChild()在元素末尾添加元素；
insertBefore()在某个元素之前插入元素
replaceChild()替换元素；
元素的删除：removeChild()

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
在DOM0级事件处理程序，事件名以'on'开头，因此click事件的事件处理程序就是onclick、load事件的事件处理程序就是onload。
DOM2级事件定义了两个方法，用于处理制定和删除事件处理程序的操作“addEventListener() 和removeEventListener()，接收3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值；
使用0级事件处理具有跨浏览器的优势；
2级事件处理可以添加多个事件处理程序。

attachEvent与addEventListener的区别？
一、适应的浏览器版本不同
attachEvent方法适用于IE addEventListener方法适用于FF
二、针对的事件不同
attachEvent中的事件带on 而addEventListener中的事件不带on
三、参数的个数不同
attachEvent方法两个参数：第一个参数为事件名称，第二个参数为接收事件处理的函数；
addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数是一个bool值，一般为false
第三个参数叫做useCapture，是一个boolean值，就是true or false，如果送出true的话就是瀏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数，我想，看图会比较清楚。

解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡：事件发生后先从具体的接收元素，然后逐步向上传播到不具体的元素。
DOM2事件传播机制：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段.

如何阻止事件冒泡？ 如何阻止默认事件？
阻止事件冒泡：stopProprgation();
阻止默认事件：preventDefault();

代码1
代码2
代码3
代码4
代码5