Dom、事件

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

• innerText返回元素内包括的文本内容。在多层次的时候，按照由浅到深的顺序拼接其内容，更安全。
• innerHtml它除了有innerText的作用外,还包含标签，两者都可以直接进行修改

1476699580575_2.png

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

• .children获取子节点，文本节点以外的 ，也就是获取标签。
• .chiidNodes获取所有子节点，包括换行符，包括文本。

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

• getElementById()，方法返回匹配指定ID属性的元素节点。
• getElementsByClassName()，返回包括了所有class名字符合指定条件的元素。
• getElementsByTagName()，方法返回所有指定标签的元素。
• getElementsByName()，方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和- -object，返回一个NodeList格式的对象，不会实时反映元素的变化。
• querySelector('#id')，方法返回匹配指定的CSS选择器的元素节点。
• querySelectorAll('.class')，方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。

4.如何创建一个元素？如何给元素设置属性？

• 创建元素：
  createElement方法用来生成HTML元素节点。createTextNode()方法用来生成文本节点，参数为所要生成的文本节点的内容。

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

• 设置元素：
  setAttribute('src'，'https：www.baidu.com') ，第一个值为元素的属性，第二个值为设置的值。

5.元素的添加、删除？

• 添加：
  appendChild()在元素末尾添加元素
  insertBefore()在某个元素之前插入元素
  replaceChild()接受两个参数：要插入的元素和要替换的元素
• 删除：
  删除元素使用removeChild()方法即可

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

• DOM0 事件：

//1
<a href="#" id="hash" onclick="fn();fn();">
//2
btn.onclick=function(){
alert('');
};

1.把onclick写在标签内，都是dom0级事件，fn和fn1依次执行; 2.绑定onclick事件也是dom0级，第二个会覆盖第一个onclick，也会覆盖行内的onclick.

• DOM2 事件

//1
$('#hash').click(function(){
alert('jq的dom2')
});
//2
btn.addEventListener('click',function(){
alert('原生dom2')
},false)

以上的绑定都属于dom2级事件绑定，1是jq的绑定方式，2是原生js的绑定方式，不会覆盖，会依次执行jq的绑定方法和原生的绑定方法，这就是与dom0级的区别；

7.attachEvent与addEventListener的区别？

• addEventListener是现代大多数逐渐主流浏览器（Chrome,firefox,safari）监听事件的方法。

• addEventListener共有3个参数，如下所示：

element.addEventListener(type,listener,useCapture);

type （事件名称，注意去掉事件前边的“on”，比如“onclick”要写成“click”，“onmouseover”要写成“mouseover”）
listener（要绑定的事件监听函数）
userCapture（事件监听方式，只能是true和false。true：采用capture(捕获)模式；false：采用bubbling(冒泡)模式。如无特殊要求，一般是false）

• attachEvent是老版本IE浏览器上监听事件的方法
• attachEvent共有2个参数，如下所示：

element.addEventListener(type,listener);

type （事件名称，注意加上事件前边的“on”，比如“onclick”和“onmouseover”，这是与addEventListener的区别）
E8.0及其以下版本使用该方法

以及：
addEventListener的this指的触发元素，而attachEvent的this是window。
addEventListener添加会按照顺序执行，而attachEvent多个事件处理程序时顺序无规律

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

• 冒泡型事件的基本思想是、事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

Paste_Image.png

• DOM2级事件规定事件流包括三个阶段（事件捕获阶段，处于目标阶段，事件冒泡阶段），如图：

Paste_Image.png

假如我们点击一个div, 实际上是先点击document，然后点击事件传递到div,而且并不会在这个div就停下，div有子元素就还会向下传递，最后又会冒泡传递回document，如上图。

9.如何阻止事件冒泡？ 如何阻止默认事件？

• 阻止事件冒泡
• DOM事件对象：.stopPropagation();
• IE事件对象：.cancelBubble = true;默认为false，设置为true后可以取消事件冒泡
• 阻止默认事件
• DOM事件对象：.preventDefault();
• IE事件对象：.returnValue = false;默认为true，设为false可以取消事件默认行为

10.代码

task22-1在线预览
task22-2在线预览
task22-3在线预览
task22-4在线预览
task22-5在线预览