一、問答
1. dom對象的innerText和innerHTML有什么區(qū)別？
-
innerHTML： 也就是從對象的起始位置到終止位置的全部內(nèi)容,包括Html標(biāo)簽。 -
innerHTML： 從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽 。
2. elem.children和elem.childNodes的區(qū)別？
-
elem.children：它返回指定元素的子元素集合， 不會返回TextNode。用的比較多
-elem.childNodes： 它返回指定元素的子元素集合，包括HTML節(jié)點(diǎn)，所有屬性，文本。
3. 查詢元素有幾種常見的方法？
- 原生JS獲取元素的方法
（1）.通過頂層document節(jié)點(diǎn)獲取：- document.getElementById(elementId):該方法通過節(jié)點(diǎn)的ID，可以準(zhǔn)確獲得需要的元素，是比較簡單快捷的方法。如果頁面上含有多個相同id的節(jié)點(diǎn)，那么只返回第一個節(jié)點(diǎn)。
-
document.getElementsByName(elementName)：用來選擇一些具有name屬性的html元素，比如form、img等，返回一個儲存對應(yīng)類名的類數(shù)組對象，要用arr[i] 來使用，只有 document
能使用 - document.getElementsByTagName(tagName)：該方法是通過節(jié)點(diǎn)的Tag獲取節(jié)點(diǎn)，同樣該方法也是返回一個數(shù)組
- document.getElementsByClassName(className)：通過類名來選擇元素，返回一個儲存對應(yīng)類名的類數(shù)組對象
- querySelector()：使用css選擇器語法來選中目標(biāo)元素，會返回匹配到的元素節(jié)點(diǎn)如果有多個滿足條件的元素節(jié)點(diǎn)將只返回第一個
- querySelectorAll() ：與querrSelector類似，返回所有滿足條件的元素節(jié)點(diǎn),是一個類數(shù)組對象
4. 如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？
1.如何創(chuàng)建一個元素
-
document.createElement(): 用來生成HTML元素節(jié)點(diǎn)；
-createTextNode()：createTextNode方法用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
-createDocumentFragment()：createDocumentFragment方法生成一個DocumentFragment對象。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container">
<ul id="bar">
<li class="item">你</li>
<li class="item">是</li>
<li class="item">誰</li>
<li class="item">在</li>
<li class="item">干</li>
</ul>
</div>
<script>
function $$(id){
return document.getElementById(id);
}
function tag(className){
return document.getElementsByClassName(className);
}
</script>
</body>
</html>
2.如何給元素設(shè)置屬性
- HTML元素對象有一個
attributes屬性，返回一個類似數(shù)組的動態(tài)對象，成員是該元素標(biāo)簽的所有屬性節(jié)點(diǎn)對象，屬性的實時變化都會反映在這個節(jié)點(diǎn)對象上。其他類型的節(jié)點(diǎn)對象，雖然也有attributes屬性，但是返回的都是null，因此可以把這個屬性視為元素對象獨(dú)有的。 - 常用有兩種方法：第一種是直接用HTML標(biāo)簽對象進(jìn)行讀寫操作，第二種是用setAttribute()方法進(jìn)行讀寫；
5. 元素的添加、刪除？
- 添加元素的方法:
- appendChild() ：在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- insertBefore()：在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
- replaceChild()：replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);```
- 刪除元素的方法：
- removeChild()
parentNode.removeChild(childNode);
###6. DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- 概念：事件是某些動作發(fā)生時產(chǎn)生的信號。JavaScript能夠感知這些信號，因此能夠編寫代碼來響應(yīng)這些信號，也就是響應(yīng)這些事件。而響應(yīng)某個事件的函數(shù)就叫做**事件處理程序（或事件偵聽器）**。事件處理程序的名字以on開頭，所以click點(diǎn)擊事件的事件處理程序就是onclick，load事件的事件處理程序就是onload等等。
- DOM0級事件處理程序：
因為在HTML代碼中直接指定事件處理程序存在一些缺陷，所以人們轉(zhuǎn)而使用JavaScript來指定事件處理程序。通過JavaScript來指定事件處理程序的方式就是將一個函數(shù)賦值給一個事件處理屬性。
在DOM0級事件處理程序中，要使用JavaScript來指定事件處理程序，首先需要獲取操作對象的引用。每一個元素對象都有自己的事件處理屬性，例如onclick
，將這些屬性的值設(shè)置為一個函數(shù)，就可以指定事件處理程序了。例如：
<input type="button" value="點(diǎn)擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你點(diǎn)擊了按鈕");
}
</script>
使用DOM0級方法指定的事件處理程序被認(rèn)為是元素的方法。這時候的事件處理程序是在元素的作用域中運(yùn)行的，也就是說，在事件處理程序中，this
引用就是這個元素對象。例如：
<input type="button" value="點(diǎn)擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id); //輸出“btn”
}
</script>
我們可以在上事件處理程序中使用this
關(guān)鍵字來獲取元素的所有屬性和方法。以這種方式添加的事件處理程序會在[事件流](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201512012851.html)的冒泡階段被處理。例如使用下面的代碼可以查看事件冒泡的情況。
<html lang="zh" id="html" class="demo">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body id="body" class="demo">
<div id="parent" class="demo">
<button id="child" class="demo">點(diǎn)擊一下</button>
</div>
</body>
</html>
下面是控制臺中輸出的結(jié)果：
從控制臺中的輸出結(jié)果可以看出，由上到下的順序為child→parent→body→html，說明事件最先發(fā)生在按鈕（child）上面，然后逐級往上冒泡。
DOM0事件處理程序會產(chǎn)生事件冒泡。如果要取消事件冒泡，可以使用event.stopPropagation()方法，但是IE瀏覽器不支持這個方法，在IE中，取消事件冒泡的方法為：event.cancleBubble = true。
//取消事件冒泡
event.stopPropagation(); //DOM方法
event.cancleBubble = true; //IE的方法
另外要提的一點(diǎn)是DOM0事件處理程序不支持事件捕獲。
我們也可以刪除通過DOM0級方法指定的事件處理程序，只要將事件處理程序?qū)傩缘闹翟O(shè)置為null即可。
btn.onclick = null;
使用DOM0級事件處理程序最大的問題是事件會被覆蓋。來看下面的例子：
<input type="button" value="點(diǎn)擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
console.info("event-one");
}
btn.onclick = function(){
console.info("event-two");
}
btn.onclick = function(){
console.info("event-three");
}
</script>
在上面的代碼中，通過按鈕的引用對象為按鈕添加了3個事件處理函數(shù)，那么現(xiàn)在的問題是哪一個事件處理程序會被執(zhí)行？答案是第三個事件處理程序會被執(zhí)行，控制臺中會輸出“event-three”。這是因為btn.onclick
實際上就像一個指針，在執(zhí)行第一個事件處理程序時它指向了內(nèi)存中的一個引用，執(zhí)行第二個事件處理程序時它又會指向另一個內(nèi)存的引用，最終會指向第3個事件處理函數(shù)的內(nèi)存引用。
- DOM2級事件處理程序
由于DOM0級事件處理程序會產(chǎn)生事件冒泡和事件覆蓋等問題，W3C組織制定了“DOM2級事件處理程序”。“DOM2級事件處理程序”定義了2個方法，用于處理指定和刪除事件處理程序的操作，這2個方法是：```addEventListener```和```removeEventListener```。所有的DOM節(jié)點(diǎn)中都包含這兩個方法，這些方法接收3個參數(shù)：**要處理的事件名稱**、**作為事件處理程序的函數(shù)**和**一個布爾值**。布爾值參數(shù)如果設(shè)置為**true**，表示在**捕獲階段調(diào)用事件處理程序**，如果設(shè)置為**false**，表示在事件**冒泡階段調(diào)用事件處理程序**。
如果要在一個按鈕上添加DOM2級事件處理程序，可以使用下面的代碼：
<input type="button" value="點(diǎn)擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
</script>
上面的代碼為按鈕添加了一個DOM2級事件處理程序，事件名稱是click，對應(yīng)DOM0級的onclick屬性。因為最后一個參數(shù)為false，所以這個事件會在冒泡階段被觸發(fā)。
和DOM0級事件處理程序相同，DOM2級事件處理程序也會依附在元素的作用域中運(yùn)行。
使用DOM2級事件處理程序就可以避免DOM0級事件處理程序的事件覆蓋問題。例如下面的例子：
<input type="button" value="點(diǎn)擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.info("event-one");
},false);
btn.addEventListener("click",function(){
console.info("event-two");
},false);
btn.addEventListener("click",function(){
console.info("event-three");
},false);
</script>
查看控制臺我們會發(fā)現(xiàn)，3個事件都會被執(zhí)行，控制臺中依次打印出：“event-one”、“event-two”和“event-three”。
接下來，我們可以來看一下事件捕獲的情況。[上一篇文章](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201512012851.html)只是介紹了事件捕獲，并沒有舉一個具體的例子。下面我們在DOM2級事件處理程序中來查看事件捕獲的過程。代碼如下：
<html lang="zh" id="html" class="demo">
<head>
<meta charset="UTF-8">
<title>事件捕獲</title>
</head>
<body id="body" class="demo">
<div id="parent" class="demo">
<button id="child" class="demo">點(diǎn)擊一下</button>
</div>
<script type="text/javascript">
window.onload = function(){
var elements = document.querySelectorAll(".demo");
for(var i = 0 ; i < elements.length; i++){
elements[i].addEventListener("click",function(event){
var element = elements[i];
//獲取事件
event = event?event:window.event;
//獲取事件發(fā)生的目標(biāo)
target = event.target?event.target:event.srcElement;
console.info("事件源："+target.id+" , "+target.tagName+", 事件對象："+this.id);
},true);
}
}
</script>
</body>
</html>
由于在上面的事件處理程序中，第3個參數(shù)被設(shè)置為true
，表示在捕獲階段調(diào)用事件處理程序。在Firefox瀏覽器的控制臺中得到下面的結(jié)果：
從控制臺的結(jié)果中可以看到，事件源是按鈕，事件對象從上往下分別為：
<document>→<body>→<parent>→<child>。
通過addEventListener()方法添加的事件處理程序只能通過removeEventListener()方法來移除。移除時傳入的參數(shù)和添加事件處理程序時的參數(shù)一樣。注意：通過addEventListener()方法添加的匿名函數(shù)將無法移除。下面是一個移除DOM2級事件處理程序的例子：
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.info(this.id);
},false);
......
btn.removeEventListener("click",function(){/函數(shù)在此處沒有用/},false);
傳入removeEventListener()中的事件處理函數(shù)必須與addEventListener()中的事件處理函數(shù)相同，例如：
var fn = function(){
console.info(this.id);
}
var btn = document.getElementById("btn");
btn.addEventListener("click",fn,false);
......
btn.removeEventListener("click",fn,false);
在多數(shù)情況下，都是將事件處理程序添加到事件流的事件冒泡階段，這樣可以最大限度的兼容各種瀏覽器。最好只在事件到達(dá)目標(biāo)之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥绞录东@階段。
###7. ```attachEvent```與```addEventListener```的區(qū)別？
- 在添加事件處理程序事addEventListener和attachEvent主要有幾個區(qū)別：
(1). **參數(shù)個數(shù)不相同**，這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
(2). **第一個參數(shù)意義不同**，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
(3). **事件處理程序的作用域不相同**，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運(yùn)行，this是window，所以剛才例子才會返回undefined，而不是元素id
(4). **為一個事件添加多個事件處理程序時，執(zhí)行順序不同**，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
###8. 解釋IE事件冒泡和DOM2事件傳播機(jī)制？
- 事件冒泡：
IE的事件流叫做事件冒泡（event bubbling），它是指事件最初由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)。例如有下面的HTML代碼：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
</head>
<body>
<button id="btn">點(diǎn)擊一下</button>
</body>
</html>
如果你點(diǎn)擊了頁面中的按鈕，那么事件將按照如下的順序進(jìn)行傳播：
<button>→<body>→<html>→<document>
也就是說，點(diǎn)擊事件實際發(fā)生在<button>元素上，然后事件會沿著DOM樹向上傳播，在每一個DOM節(jié)點(diǎn)上都會發(fā)生，一直傳播到document對象。
所有的現(xiàn)代瀏覽器都支持事件冒泡，但是在具體實現(xiàn)上略有差別。
- 事件捕獲：
事件捕獲的思想是不具體的節(jié)點(diǎn)應(yīng)該更早的接收到事件，最具體的節(jié)點(diǎn)最后才接收到事件。事件捕獲的用意在于在事件到達(dá)預(yù)定的目標(biāo)之前捕獲它。還是以上面的HTML頁面的代碼為例子，在點(diǎn)擊了按鈕之后，事件的傳播方式為：
<document>→<html>→<body>→<button>
在事件捕獲的過程中，document對象首先接收到點(diǎn)擊事件，然后事件會沿著DOM樹依次向下，一直傳播到事件的目標(biāo)元素。
Firefox、Chrome、Safari和Opera瀏覽器都支持事件捕獲。“DOM2級事件”要求事件應(yīng)該從document對象開始傳播，但是上面的4種瀏覽器都從window對象開始捕獲事件。
- DOM2事件傳播機(jī)制：
“DOM2級事件”規(guī)定的事件流包括3個階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲，這為截獲事件提供了機(jī)會。接著是實際觸發(fā)事件的目標(biāo)。最后是事件冒泡，可以在這個階段對事件作出響應(yīng)。還是以前面的HTML代碼為例，單擊按鈕元素后會按照下圖所示的順序觸發(fā)事件。
在DOM事件流中實際的目標(biāo)元素（按鈕）在事件捕獲階段不會接受到事件。這意味著在事件捕獲階段，事件從document到<html>再到<body>就停止了。然后接著是“處于目標(biāo)”階段，這時事件在按鈕上發(fā)生，這個階段被看成是事件冒泡的一部分。最后是事件冒泡階段，事件又傳播回文檔中。
雖然“DOM2級事件”規(guī)范明確規(guī)定捕獲階段不會涉及事件目標(biāo)，但是Firefox、Chrome、Safari和Opera瀏覽器都會在捕獲階段觸發(fā)事件對象上的事件。這將給我們兩個機(jī)會在目標(biāo)元素上操作事件。
另外，F(xiàn)irefox、Chrome、Safari和Opera瀏覽器都支持DOM事件流，但是IE不支持DOM事件流。
###9. 如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
- 在非IE下：
- 阻止事件冒泡：可以用```event.stopPropagation()```;
- 阻止默認(rèn)事件：可以用```event.preventDefault()```;
- 在IE下：
- 阻止事件冒泡：可以用```event.cancelBubble = true```;
- 阻止默認(rèn)事件：可以用```event.returnValue = false```;
測試如下：
<!DOCTYPE html>
<html class="demo">
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body class="demo">
<div id="container" class="demo">
<a id="btn1">點(diǎn)死我</a>
</div>
<script>
addEventHandler($$('#btn1'),'click',function(event){
event.preventDefault();//點(diǎn)擊不會跳轉(zhuǎn)，默認(rèn)行為取消
event.stopPropagation();//由下for循環(huán)可知，原本在父容器身上都有事件處理程序，并且會在冒泡階段執(zhí)行，但是這里設(shè)置了，所以父容器身上接收'click'事件的程序響應(yīng)就被阻止了；
console.log(this);//
});
for(var i=0; i<$$$('.demo').length;i++) {
addEventHandler($$$('.demo')[i], 'click', function () {
console.log(this.tagName);
});}
//封裝DOM對象獲取
function $$(el){
return document.querySelector(el);
}
function $$$(els){
return document.querySelectorAll(els);
}
//封裝添加事件處理程序
function addEventHandler(node,type,handler){
if(!node) return false;
if(node.addEventListener){
node.addEventListener(type,handler,false);
}else if(node.attachEvent){
node.attachEvent('on'+type,handler);
}else{
node['on'+type] = handler;
}
}
//封裝刪除事件處理程序
function removeEventHandler(node,type,handler){
if(node.removeEventListener){
node.removeEventListener(type,handler,false);
}else if(node.detachEvent){
node.detachEvent('on'+type,handler);
}else{
node['on'+type] = null;
}
}
</script>
</body>
</html>
