一、dom對象的innerText和innerHTML有什么區別？
<div id="test">
<span style="color:red">test1</span> test2
</div>
<script>
var test = document.getElementById("test");
</script>
-
innerHTML返回的是從對象起始位置到終止位置的全部內容，包含HTML標簽。
上例中test.innerHTML的值是“<span style="color:red">test1</span> test2” -
innerText返回的是從對象起始位置到終止位置的所有文本內容，不包含HTML標簽。
上例中test.innerText的值是“test1 test2”
二、elem.children和elem.childNodes的區別？
-
elem.children返回當前元素的所有子元素節點的集合 -
elem.childNodes返回當前元素的所有子節點的集合，包含元素節點、屬性節點和文本節點
elem.children和elem.childNodes的區別是，elem.children只包含HTML元素類型的子節點，不包含其他類型的子節點。
可用nodeType來判斷節點類型，當nodeType==1時是元素節點，2是屬性節點，3是文本節點
三、查詢元素有幾種常見方法
-
getElementById()：返回匹配指定ID屬性的元素節點。 -
getElementByClassName()：返回className符合指定條件的所有元素的集合。 -
getElementByTagName()：返回所有指定標簽的元素集合。 -
getElementByName()：用于選擇擁有name屬性的HTML元素,比如form、img、frame、embed和object,返回所有滿足條件的元素集合。（在IE瀏覽器使用這個方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設為不一樣的值。） -
querySelector()：返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。 -
querySelectorAll()返回匹配指定的CSS選擇器的所有節點的集合。
四、如何創建一個元素？如何給元素設置屬性？
- 創建元素：
var element = document.creatElement(元素名) - 給元素設置屬性：
元素節點.setAttribute(屬性名, 值)
五、元素的添加、刪除
- 在元素末尾添加元素：
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); - 刪除元素：
node.removeChild()
刪除當前結點的某個子節點
六、DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？
-
DOM0事件處理程序
每個元素（包括window和document）都有自己的事件處理程序屬性，這些屬性通常全部小寫，如onclick，將這種屬性賦值為一個函數，就是DOM0 級事件處理程序的指定方式。如下：
var btn = document.getElementById('myBtn'); // 取得對操作對象的引用
btn.onclick = function () { // 為onclick賦值一個函數，指定事件處理程序
console.log('hello');
}
移除事件處理程序：
btn.onclick = null; // 只需將屬性置空
特點：- 添加事件處理程序的代碼只有在運行完之后才會為元素綁定事件處理程序，因此如果該段代碼為執行，單擊按鈕是沒有反應的
- 事件處理程序中的
this引用當前元素，級綁定了該事件的元素 - 以這種方式添加的事件處理程序會在事件的冒泡階段被處理
- 所有瀏覽器都支持DOM0級事件處理程序
DOM2級事件處理程序
DOM2級事件處理程序定義了兩個方法，用來指定和刪除事件處理程序：addEventListener()和removeEventListener()。這兩個方法都接受三個參數：要處理的事件類型、作為事件處理程序的函數、一個布爾值。這個布爾值參數如果為true表示在事件捕獲階段調用事件處理程序，為false表示在事件冒泡階段調用事件處理程序，一般設為false。
添加事件處理程序：
var btn = document.getElementById('myBtn'); // 取得對操作對象的引用
btn.addEventListener('click', function(){ // 注意是 click 哦~
console.log('hello');
}, false);
或
function show() {
console.log('hello');
}
var btn = document.getElementById('myBtn'); // 取得對操作對象的引用
btn.addEventListener('click', show, false);
移除事件處理程序：
移除事件處理程序有一個要求就是：移除時傳入的參數必須與添加事件處理程序時使用相同的參數。從而通過addEventListener()添加的匿名函數將無法移除。
移除上面第二種方式綁定的事件處理程序代碼：
var btn = document.getElementById('myBtn'); // 取得對操作對象的引用
btn.removeEventListener('click', show, false);
通過addEventListener()添加的事件處理程序只能通過removeEventListener()來移除。
特點：
- 只有運行完
addEventListener()才會為元素綁定事件處理程序 - 事件處理程序的
this引用當前元素，即綁定了當前事件的元素 - 通過設置第三個參數為
true或false可以設定在捕獲階段還是冒泡階段調用事件處理程序 - 可以為同一元素的同一事件綁定多個事件處理程序，綁定的事件處理程序會按照他們添加的先后順序依次觸發（DOM0級只能添加一個事件處理程序，后添加的會覆蓋先添加的）
- IE9、Firefox、Safari、Chrome和Opera都支持DOM2 級事件處理程序。
七、attachEvent與addEventListener的區別？
- 參數及綁定階段不同：
* 參數個數不同：`addEventListener()`有3個參數，`attachEvent()`有2個參數；
* `attachEvent()`事件處理程序只能綁定在事件冒泡階段，`addEventListener()`可以通過其第三個參數設定為`true`或`false`來決定事件處理程序綁定在冒泡還是捕獲階段；
* 第一個參數意義不同：`addEventListener()`第一個參數是事件類型（如`click`、`load`），`attachEvent()`第一個參數是事件處理函數名稱（如`onclick`、`onload`）
- 事件處理程序的作用域不同，
addEventListener()作用域是元素本身，this指觸發元素；attachEvent()在全局作用域中運行，this指window - 在同一事件上綁定多個事件處理程序時執行順序不同，
addEventListener()是以添加他們的順序執行，attachEvent()執行順序是無序的
八、解釋IE事件冒泡和DOM2事件傳播機制？
-
IE事件冒泡
接收事件的順序是：事件開始由具體的元素接收，然后逐級向上傳播到較為不具體的節點。如果頁面中有個
div，點擊了div之后，事件的傳播順序如下：
（1）div
（2）body
（3）html
（4）document事件冒泡過程圖如下：
所有現代瀏覽器都支持事件冒泡，而且IE9，Firefox、Chrome、Safari都將事件一直冒泡到window
對象。
- DOM2事件傳播機制
事件傳播包含三個階段：事件捕獲階段、處于目標階段、事件冒泡階段
如下圖：
捕獲階段包括1、2、3，冒泡階段包括4、5、6、7，其中4是處于目標階段，在事件處理中被看成是冒泡階段的一部分
雖然“DOM2級事件”規定捕獲階段不涉及事件目標，但是IE9，Firefox、Chrome、Safari和Opera9.5及以上版本都會在捕獲階段觸發事件對象上的事件，這就意味著有兩個機會在目標對象上面操作事件。
IE9，Firefox、Chrome、Safari、Opera都支持“DOM2級事件傳播機制”，IE8及更早版本不支持“DOM2級事件傳播機制”。即IE9，Firefox、Chrome、Safari、Opera既支持冒泡又支持捕獲，而IE8及以前版本僅支持冒泡。
需要說明的是，在實際中，大多數都使用冒泡事件，僅在有特殊需要時才使用捕獲事件。
九、如何阻止事件冒泡？ 如何阻止默認事件？
- DOM中的事件對象（兩個方法）
-
preventDefault()方法用來取消事件默認行為 -
stopPropagation()方法用來阻止事件進一步捕獲或冒泡
// 假設事件對象傳入給參數event
event.preventDefault(); // 取消事件默認行為
event.stopPropagation(); // 阻止事件進一步捕獲或冒泡
-
- IE8及以下中的事件對象（兩個屬性）
returnValue屬性用來設置事件的默認行為。默認值為true，當設置為false時，就會取消事件的默認行為。-
cancelBubble屬性用來取消事件冒泡。默認值為false，當設置為true時，就會阻止事件冒泡event.returnValue = false; // 取消事件的默認行為 event.cancelBubble = true; // 阻止事件冒泡
注：這兩個屬性僅IE8及以下版本支持，IE9+使用這兩個屬性會報錯。
本文版權屬吳天喬所有，轉載務必注明出處。
