1.dom對象的innerText和innerHTML有什么區(qū)別？

• innerText返回元素內(nèi)包括的文本內(nèi)容。在多層次的時候，按照由淺到深的順序拼接其內(nèi)容，更安全。
• innerHtml它除了有innerText的作用外,還包含標(biāo)簽，兩者都可以直接進行修改

1476699580575_2.png

2.elem.children和elem.childNodes的區(qū)別？

• .children獲取子節(jié)點，文本節(jié)點以外的 ，也就是獲取標(biāo)簽。
• .chiidNodes獲取所有子節(jié)點，包括換行符，包括文本。

3.查詢元素有幾種常見的方法？

• getElementById()，方法返回匹配指定ID屬性的元素節(jié)點。
• getElementsByClassName()，返回包括了所有class名字符合指定條件的元素。
• getElementsByTagName()，方法返回所有指定標(biāo)簽的元素。
• getElementsByName()，方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和- -object，返回一個NodeList格式的對象，不會實時反映元素的變化。
• querySelector('#id')，方法返回匹配指定的CSS選擇器的元素節(jié)點。
• querySelectorAll('.class')，方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。

4.如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？

• 創(chuàng)建元素：
  createElement方法用來生成HTML元素節(jié)點。createTextNode()方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內(nèi)容。

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

• 設(shè)置元素：
  setAttribute('src'，'https：www.baidu.com') ，第一個值為元素的屬性，第二個值為設(shè)置的值。

5.元素的添加、刪除？

• 添加：
  appendChild()在元素末尾添加元素
  insertBefore()在某個元素之前插入元素
  replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
• 刪除：
  刪除元素使用removeChild()方法即可

6.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？

• DOM0 事件：

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

1.把onclick寫在標(biāo)簽內(nèi)，都是dom0級事件，fn和fn1依次執(zhí)行; 2.綁定onclick事件也是dom0級，第二個會覆蓋第一個onclick，也會覆蓋行內(nèi)的onclick.

• DOM2 事件

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

以上的綁定都屬于dom2級事件綁定，1是jq的綁定方式，2是原生js的綁定方式，不會覆蓋，會依次執(zhí)行jq的綁定方法和原生的綁定方法，這就是與dom0級的區(qū)別；

7.attachEvent與addEventListener的區(qū)別？

• addEventListener是現(xiàn)代大多數(shù)逐漸主流瀏覽器（Chrome,firefox,safari）監(jiān)聽事件的方法。

• addEventListener共有3個參數(shù)，如下所示：

element.addEventListener(type,listener,useCapture);

type （事件名稱，注意去掉事件前邊的“on”，比如“onclick”要寫成“click”，“onmouseover”要寫成“mouseover”）
listener（要綁定的事件監(jiān)聽函數(shù)）
userCapture（事件監(jiān)聽方式，只能是true和false。true：采用capture(捕獲)模式；false：采用bubbling(冒泡)模式。如無特殊要求，一般是false）

• attachEvent是老版本IE瀏覽器上監(jiān)聽事件的方法
• attachEvent共有2個參數(shù)，如下所示：

element.addEventListener(type,listener);

type （事件名稱，注意加上事件前邊的“on”，比如“onclick”和“onmouseover”，這是與addEventListener的區(qū)別）
E8.0及其以下版本使用該方法

以及：
addEventListener的this指的觸發(fā)元素，而attachEvent的this是window。
addEventListener添加會按照順序執(zhí)行，而attachEvent多個事件處理程序時順序無規(guī)律

8.解釋IE事件冒泡和DOM2事件傳播機制？

• 冒泡型事件的基本思想是、事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對象)的順序觸發(fā)。

Paste_Image.png

• DOM2級事件規(guī)定事件流包括三個階段（事件捕獲階段，處于目標(biāo)階段，事件冒泡階段），如圖：

Paste_Image.png

假如我們點擊一個div, 實際上是先點擊document，然后點擊事件傳遞到div,而且并不會在這個div就停下，div有子元素就還會向下傳遞，最后又會冒泡傳遞回document，如上圖。

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

• 阻止事件冒泡
• DOM事件對象：.stopPropagation();
• IE事件對象：.cancelBubble = true;默認為false，設(shè)置為true后可以取消事件冒泡
• 阻止默認事件
• DOM事件對象：.preventDefault();
• IE事件對象：.returnValue = false;默認為true，設(shè)為false可以取消事件默認行為

10.代碼

task22-1在線預(yù)覽
task22-2在線預(yù)覽
task22-3在線預(yù)覽
task22-4在線預(yù)覽
task22-5在線預(yù)覽