問答
1. dom對象的innerText和innerHTML有什么區(qū)別？
- innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺入深的順序拼接其內容；當寫入新內容時會覆蓋掉其內部所有內容，此時輸入的內容為文本格式，即使有HTML標簽也會當成文本。
- innerHTML的屬性作用和innerText類似，但是不是返回元素的文本內容，而是返回元素的HTML結果，在寫入的時候也會自動構建DOM。
<pre>
<div id="content">
<p>123 <span>456</span> </p>
</div>
<script>
var div = document.getElementById("content");
</script>
</pre>
2. elem.children和elem.childNodes的區(qū)別？
- elem.children： 只獲取子元素相應的元素部分（Elements類型），非元素部分如：Text類型（比如空格、文字）、Comment類型等它不獲取，它屬于HTML Collection（元素的集合）。
- elem.childNodes：不僅獲取元素部分（Elements類型），還獲取非元素部分如：Text類型、Comment類型等，它屬于NodeList（節(jié)點的集合）。
如：
3. 查詢元素有幾種常見的方法？
- getElementById()：該方法返回匹配指定ID屬性的元素節(jié)點。如果沒有發(fā)現匹配的節(jié)點，則返回null。
- getElementsByClassName()：該方法返回一個類似數組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節(jié)點上調用。
- getElementsByTagName()：該方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節(jié)點上調用。
- getElementsByName()：該方法用于選擇擁有name屬性的HTML元素。
返回一個NodeList格式的對象，不會實時反映元素的變化。
- querySelector()：該方法返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有發(fā)現匹配的節(jié)點，則返回null。
- querySelectorAll()：該方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結果中。
- elementFromPoint()：該方法返回位于頁面指定位置的元素。
4. 如何創(chuàng)建一個元素？如何給元素設置屬性？
- document.createElement()方法可以創(chuàng)建新的HTML元素節(jié)點；要與appendChild() 或 insertBefore()方法聯合使用。其中，appendChild() 方法在節(jié)點的子節(jié)點列表末添加新的子節(jié)點。insertBefore() 方法在已有的子節(jié)點前插入一個新的子節(jié)點。
document.createTextNode()方法可以用來創(chuàng)建新的文本節(jié)點，參數為所要生成的文本節(jié)點的內容； - setAttribute()方法用于設置元素屬性，里面?zhèn)魅雰蓚€參數，第一個參數為元素的屬性名，第二個參數為定義的值。
5. 元素的添加、刪除？
- 元素的添加：
- appendChild()：讓指定元素成為某個現有元素的最后一個子元素。
語法表示：parent.appendChild(child); - insertBefore()：讓指定的元素插入到某個現有元素的前面。
語法表示：parentElement.insertBefore(newElement,targetElement)； - 元素的刪除：
removeChild()：刪除某個元素，不過要注意的地方是，該方法不是在待刪除的元素上調用，而是在其父元素上調用。
語法表示：parent.removeChild(child)
6. DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0 級事件處理程序通過JS制定事件處理程序的傳統(tǒng)方法，將一個函數賦值給一個事件處理程序屬性進行事件監(jiān)聽；DOM2 級事件處理程序是通過定義了addEventListener()和removeEventListener()來進行事件監(jiān)聽；
- DOM0事件處理程序不能添加多個事件處理程序，而DOM2級事件處理程序可以；
- DOM2事件可以選擇在捕獲階段還是冒泡階段進行監(jiān)聽器觸發(fā)，DOM0視瀏覽器設置而定；
7. attachEvent與addEventListener的區(qū)別？
- 參數個數不同：addEventListener有三個參數，attachEvent值有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段；addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段（我們一般為了瀏覽器兼容性都設置為冒泡階段）
- 第一個參數意義不同：addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload）
- 事件處理程序的作用域不同：addEventListener的作用域是元素本身，this指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內運行，this是window
- 為一個事件添加多個事件處理程序時，執(zhí)行順序不同：addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律（添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了）
8. 解釋IE事件冒泡和DOM2事件傳播機制？
- IE事件冒泡：事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。
- DOM2事件傳播機制：分為三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機會，然后是實際的目標接收到了事件，最后是冒泡階段，這個階段對事件作出響應。
9. 如何阻止事件冒泡？ 如何阻止默認事件？
- 阻止事件冒泡：
- DOM事件對象中：event.stopPropagation()；
- IE事件對象中：event.cancelBubble = true；
- 阻止默認事件：
- DOM事件對象中：當cancelable屬性為true時，可以使用event.preventDefault();
- IE事件對象中：event.returnValue = false;
本教程版權歸饑人谷和作者所有，轉載須說明來源。
