當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

深入理解DOM节点关系

發(fā)布時間：2023/12/2 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了深入理解DOM节点关系小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前面的話

　　DOM可以將任何HTML描繪成一個由多層節(jié)點構(gòu)成的結(jié)構(gòu)。節(jié)點分為12種不同類型，每種類型分別表示文檔中不同的信息及標記。每個節(jié)點都擁有各自的特點、數(shù)據(jù)和方法，也與其他節(jié)點存在某種關(guān)系。節(jié)點之間的關(guān)系構(gòu)成了層次，而所有頁面標記則表現(xiàn)為一個以特定節(jié)點為根節(jié)點的樹形結(jié)構(gòu)。本文將詳細描述DOM間的節(jié)點關(guān)系

　　節(jié)點中的各種關(guān)系可以用傳統(tǒng)的家族關(guān)系來描述，相當于把文檔樹比喻成家譜。接下來，將把DOM節(jié)點關(guān)系分為屬性和方法兩部分進行詳細說明

屬性

父級屬性

parentNode

　　每個節(jié)點都有一個parentNode屬性，該屬性指向文檔樹中的父節(jié)點。對于一個節(jié)點來說，它的父節(jié)點只可能是三種類型：element節(jié)點、document節(jié)點和documentfragment節(jié)點。如果不存在，則返回null

<div id="myDiv"></div> <script> console.log(myDiv.parentNode);//body console.log(document.body.parentNode);//html console.log(document.documentElement.parentNode);//document console.log(document.parentNode);//null </script> <div id="myDiv"></div> <script> var myDiv = document.getElementById('myDiv'); console.log(myDiv.parentNode);//body var fragment = document.createDocumentFragment(); fragment.appendChild(myDiv); console.log(myDiv.parentNode);//document-fragment </script>

parentElement

　　與parentNode屬性不同的是，parentElement返回的是父元素節(jié)點

<div id="myDiv"></div> <script> console.log(myDiv.parentElement);//body console.log(document.body.parentElement);//html console.log(document.documentElement.parentElement);//null console.log(document.parentElement);//null </script>

　　?[注意]在IE瀏覽器中，只有Element元素節(jié)點才有該屬性，其他瀏覽器則是所有類型的節(jié)點都有該屬性

<div id="test">123</div> <script> //IE瀏覽器返回undefined，其他瀏覽器返回<div id="test">123</div> console.log(test.firstChild.parentElement); //所有瀏覽器都返回<body> console.log(test.parentElement); </script>

子級屬性

childNodes

　　childNodes是一個只讀的類數(shù)組對象NodeList對象，它保存著該節(jié)點的第一層子節(jié)點

<ul id="myUl"><li><div></div></li></ul> <script> var myUl = document.getElementById('myUl'); //結(jié)果是只包含一個li元素的類數(shù)組對象[li] console.log(myUl.childNodes); </script>

children

　　children是一個只讀的類數(shù)組對象HTMLCollection對象，但它保存的是該節(jié)點的第一層元素子節(jié)點

<div id="myDiv">123</div> <script> var myDiv = document.getElementById('myDiv'); //childNodes包含所有類型的節(jié)點，所以輸出[text] console.log(myDiv.childNodes); //children只包含元素節(jié)點，所以輸出[] console.log(myDiv.children); </script>

childElementCount

　　返回子元素節(jié)點的個數(shù)，相當于children.length

　　[注意]IE8-瀏覽器不支持

<ul id="myUl"><li></li><li></li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length);//5，IE8-瀏覽器返回2，因為不包括空文本節(jié)點 console.log(myUl.children.length);//2 console.log(myUl.childElementCount);//2，IE8-瀏覽器返回undefined </script>

firstChild

　　第一個子節(jié)點

lastChild

　　最后一個子節(jié)點

firstElementChild

　　第一個元素子節(jié)點

lastElementChild

　　最后一個元素子節(jié)點　

　　上面四個屬性，IE8-瀏覽器和標準瀏覽器的表現(xiàn)并不一致。IE8-瀏覽器不考慮空白文本節(jié)點，且不支持firstElementChild和lastElementChild

//ul標簽和li標簽之間有兩個空白文本節(jié)點，所以按照標準來說，ul的子節(jié)點包括[空白文本節(jié)點、li元素節(jié)點、空白文本節(jié)點]。但在IE8-瀏覽器中，ul的子節(jié)點只包括[li元素節(jié)點] <ul><li></li> </ul> <ul id="list"><li>1</li><li>2</li><li>3</li> </ul> <script> console.log(list.firstChild);//標準瀏覽器中返回空白文本節(jié)點，IE8-瀏覽器中返回<li>1</li> console.log(list.lastChild);//標準瀏覽器中返回空白文本節(jié)點，IE8-瀏覽器中返回<li>3</li> console.log(list.firstElementChild);//標準瀏覽器中<li>1</li>，IE8-瀏覽器中返回undefined console.log(list.lastElementChild);//標準瀏覽器中<li>3</li>，IE8-瀏覽器中返回undefined </script>

同級屬性

nextSibling

　　后一個節(jié)點

previousSibling

　　前一個節(jié)點

nextElementSibling

　　后一個元素節(jié)點

previousElementSibling

　　前一個元素節(jié)點

　　與子級屬性類似，上面四個屬性，IE8-瀏覽器和標準瀏覽器的表現(xiàn)并不一致。IE8-瀏覽器不考慮空白文本節(jié)點，且不支持nextElementSibling和previousElementSibling

<ul><li>1</li><li id="myLi">2</li><li>3</li> </ul> <script> var myLi = document.getElementById('myLi'); console.log(myLi.nextSibling);//空白節(jié)點，IE8-瀏覽器返回<li>3</li> console.log(myLi.nextElementSibling);//<li>3</li>，IE8-瀏覽器返回undefined console.log(myLi.previousSibling);//空白節(jié)點，IE8-瀏覽器返回<li>1</li> console.log(myLi.previousElementSibling);//<li>1</li>，IE8-瀏覽器返回undefined </script>

方法

包含方法

hasChildNodes()

　　hasChildNodes()方法在包含一個或多個子節(jié)點時返回true，比查詢childNodes列表的length屬性更簡單

<div id="myDiv">123</div> <script> var myDiv = document.getElementById('myDiv'); console.log(myDiv.childNodes.length);//1 console.log(myDiv.hasChildNodes());//true </script> <div id="myDiv"></div> <script> var myDiv = document.getElementById('myDiv'); console.log(myDiv.childNodes.length);//0 console.log(myDiv.hasChildNodes());//false </script>

contains()

　　contains方法接受一個節(jié)點作為參數(shù)，返回一個布爾值，表示參數(shù)節(jié)點是否為當前節(jié)點的后代節(jié)點。參數(shù)為后代節(jié)點即可，不一定是第一層子節(jié)點　

<div id="myDiv"><ul id="myUl"><li id="myLi"></li><li></li></ul> </div> <script> console.log(myDiv.contains(myLi));//true console.log(myDiv.contains(myUl));//true console.log(myDiv.contains(myDiv));//true </script>

　　[注意]IE和safari不支持document.contains()方法，只支持元素節(jié)點的contains()方法

//IE和safari報錯，其他瀏覽器返回true console.log(document.contains(document.body));

關(guān)系方法

compareDocumentPosition()

　　compareDocumentPosition方法用于確定節(jié)點間的關(guān)系，返回一個表示該關(guān)系的位掩碼

000000 0 兩個節(jié)點相同 000001 1 兩個節(jié)點不在同一個文檔（即有一個節(jié)點不在當前文檔） 000010 2 參數(shù)節(jié)點在當前節(jié)點的前面 000100 4 參數(shù)節(jié)點在當前節(jié)點的后面 001000 8 參數(shù)節(jié)點包含當前節(jié)點 010000 16 當前節(jié)點包含參數(shù)節(jié)點 100000 32 瀏覽器的私有用途 <div id="myDiv"><ul id="myUl"><li id="myLi1"></li><li id="myLi2"></li></ul> </div> <script> //20=16 4，因為myUl節(jié)點被myDiv節(jié)點包含，也位于myDiv節(jié)點的后面 console.log(myDiv.compareDocumentPosition(myUl));//10=8 2，因為myDiv節(jié)點包含myUl節(jié)點，也位于myUl節(jié)點的前面 console.log(myUl.compareDocumentPosition(myDiv));//0，兩個節(jié)點相同 console.log(myDiv.compareDocumentPosition(myDiv));//4，myLi2在myLi1節(jié)點的后面 console.log(myLi1.compareDocumentPosition(myLi2));//2，myLi1在myLi2節(jié)點的前面 console.log(myLi2.compareDocumentPosition(myLi1)); </script>

isSameNode()和isEqualNode()

　　這兩個方法都接受一個節(jié)點參數(shù)，并在傳入節(jié)點與引用節(jié)點相同或相等時返回true

　　所謂相同(same)，指的是兩個節(jié)點引用的是同一個對象

　　所謂相等(equal)，指的是兩個節(jié)點是相同的類型，具有相等的屬性(nodeName、nodeValue等等)，而且它們的attributes和childNodes屬性也相等(相同位置包含相同的值)

　　[注意]firefox不支持isSameNode()方法，而IE8-瀏覽器兩個方法都不支持

總結(jié)

以上是生活随笔為你收集整理的深入理解DOM节点关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深入学习jQuery选择器系列第六篇——
下一篇：深入理解this机制系列第三篇——箭头函