JS基礎知多少（七）DOM、事件

一、dom對象的innerText和innerHTML有什么區(qū)別？
innerHTML設置或獲取位于對象起始和結(jié)束標簽內(nèi)的HTML；
innerText設置或獲取位于對象其實和結(jié)束標簽內(nèi)的文本 。
示例如下：
<pre>
<div id="header">
< p > 我要做一名有思想的前端工程師
<span>加油</span>
< /p >
</div>
<script>
console.log(document.getElementsByTagName('p')[0].innerHTML);
console.log(document.getElementsByTagName('p')[0].innerText);
</script>
</pre>

輸出結(jié)果如下：


二、elem.children和elem.childNodes的區(qū)別？
elem.children屬性：非標準的，它返回指定元素的子元素集合。經(jīng)測試，它只返回HTML節(jié)點，甚至不返回文本節(jié)點。且在所有瀏覽器下表現(xiàn)驚人的一致。
elem.childrenNode屬性：標準的，它返回指定元素的子元素的集合，還包括HTML節(jié)點，所有屬性，文本?？梢酝ㄟ^nodeType來判斷是那種類型的節(jié)點。
示例：
html代碼：
<pre>
<div id="header">
< p >我要做一名有思想的前端工程師
<span>加油</span>
< /p >
</div>
</pre>

js代碼：
<pre>
console.log(document.getElementsByTagName('p')[0].children);
console.log(document.getElementsByTagName('p')[0].childNodes);
</pre>

輸出結(jié)果：


三、查詢元素有幾種常見的方法？
1.getElementById()
getElementById方法返回匹配指定ID屬性的元素節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。
<pre>var elem=document.getElementById("header");</pre>

2.getElementsByClassName()
getElementsByClassNaem方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結(jié)果中。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用。
<pre>var elements=document.getElementsByClassName(names);</pre>

3.getElementsByTagName()
getElementsByTagName方法返回的所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結(jié)果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用。
<pre>var paras=documents.getElementsByTagName("p");</pre>

4.getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。

注意：在IE瀏覽器使用這個方法，會將沒有name屬性，但有同名id屬性的元素也返回，所以name屬性和id屬性最好設為不一樣的值。

5.querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有，則返回null。

注意:querySelector方法無法選中CSS偽元素。

6.querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。NodeList對象不是動態(tài)對象，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中.

7.elementFromPoint()
elementFromPoint方法返回位于頁面指定位置的元素。

四、如何創(chuàng)建一個元素？如何給元素設置屬性？
1.創(chuàng)建元素
a.createElement()
createElement方法用于生成HTML元素節(jié)點
<pre>var newDiv=document.createElement("div");</pre>

createElement方法的參數(shù)元素為元素的標簽名，即元素節(jié)點的tagName屬性。如果傳入大寫的標簽名，會被轉(zhuǎn)為小寫。如果傳入大寫的標簽名，會被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號或者null,會報錯
b.createTextNode()方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內(nèi)容。
<pre>var newDiv=document.createElement("div");
var newContent=document.createTextNode("Hello");</pre>

2.設置元素屬性，使用setAttribute()
示例如下：
<pre>
<div id="header">
< p >我要做一名有思想的前端工程師
<span>加油</span>
< /p >
</div>
<script>
var divs=document.getElementsByTagName('div');
divs[0].setAttribute("name","我的夢想");
</script>
</pre>

代碼執(zhí)行完成后，會給div添加name屬性。

五、元素的添加、刪除
1.元素的添加
a.appendChild()在元素末尾添加元素
<pre>
<div>
</div>
<script>
var div=document.body.children[0];
var span=document.createElement('span');
span.innerHTML="A new span";
div.appendChild(span,div.firstChild);
</script>
</pre>

執(zhí)行結(jié)果為div中添加了元素：


b.insertBefore()在某個元素之前插入元素
示例代碼：
<pre>
<div>
</div>
<script>
var div=document.body.children[0];
var span=document.createElement('span');
span.innerHTML="A new span";
div.insertBefore(span,div.firstChild);
</script>
</pre>

2.元素刪除
刪除元素，使用removeChild()方法

六、DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
區(qū)別：
a.DOM0事件使用方法：通過javascript指定事件處理程序的傳統(tǒng)方式。就是將一個函數(shù)賦值給一個事件處理屬性。優(yōu)點：簡單且具有跨瀏覽器的優(yōu)勢。
<pre>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定當前元素btn
}
</pre>

刪除DOM0事件處理程序，只要將對應事件屬性置為null即可。
缺點：一個事件處理程序只能對應一個處理函數(shù)。
b.DOM2級事件處理程序可以綁定多個事件，一般按順序執(zhí)行。

七、attachEvent與addEventListener的區(qū)別？
區(qū)別：
1.參數(shù)個數(shù)不同，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）
示例：
使用addEventListerner:
<pre>
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');

   var handler=function() {
        alert(this.id);
    }
   btnClick.addEventListener('click', handler, false);

</script>
</pre>

使用attachEvent:
<pre>
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.attachEvent('onclick', handler);
</script>
</pre>

2.第一個參數(shù)的意義不同，addEventListener第一個參數(shù)是事件類型，而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱(onclick,onload)

3.事件處理程序的作用域不同，addEventListerner的作用域是元素本身，而attachEvemt事件處理程序會在全局變量內(nèi)運行，this是window.

4.為一個事件添加多個事件處理程序時，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律

八、解釋IE事件冒泡和DOM2事件傳播機制？
IE事件冒泡即事件開始時由最具體的元素（文檔中嵌套最深的那個節(jié)點）接收，然后逐級向上（一直到文檔）；
DOM2事件傳播機制：DOM2級事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段。首先發(fā)生的是事件捕獲，它為截獲事件提供了機會。然后是實際的目標收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。假設在頁面上點擊了一個div元素，這個事件會按照下面的順序圖進行傳播。


九、如何阻止事件冒泡？ 如何阻止默認事件？
阻止事件冒泡：w3c的方法是e.stopPropagation(),IE則是使用e.cancelBubble=true;
stopPropagation()也是事件對象（Event）的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止默認行為。
阻止默認事件：w3c的方法是e.preventDadault,IE則是使用e.returnValue=false;

參考文章：
1.瀏覽器的DOM事件
2.[JS學習筆記]Javascript事件階段：捕獲、目標、冒泡](http://www.cnblogs.com/hyaaon/p/4630128.html)
3.事件
4.JavaScript停止冒泡和阻止瀏覽器默認行為

版權(quán)歸本人所有，若有轉(zhuǎn)載，請注明來源

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容