JS中Element與Node的區別,children與childNodes的區別
阿新 • • 發佈:2019-02-20
關於Element跟Node的區別,cilldren跟childNodes的區別很多朋友弄不清楚,本文試圖讓大家明白這幾個概念之間的區別。
,我們再來測試一下:
Node(節點)是DOM層次結構中的任何型別的物件的通用名稱,Node有很多型別,如元素節點,屬性節點,文字節點,註釋節點等,通過NodeType區分,常見的有:
節點型別 | NodeType |
---|---|
元素element | 1 |
屬性attr | 2 |
文字text | 3 |
註釋comments | 8 |
文件document | 9 |
Element繼承了Node類,也就是說Element是Node多種型別中的一種,即當NodeType為1時Node即為ElementNode,另外Element擴充套件了Node,Element擁有id、class、children等屬性。
以上就是Element跟Node的區別。
那麼用document.getElementById("xxx")取到的是Node還是Element呢?我們來測試一下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <div id="test"> <p>One</p> <P>Two</p> </div> <script> var oDiv=document.getElementById("test"); console.log(oDiv instanceof Node); //true console.log(oDiv instanceof Element); //true </script> </body> </html>
我們可以看到用document.getElementById("xxx")取到的既是Element也是Node。
children是Element的屬性,childNodes是Node的屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <div id="test"> <p>One</p> <P>Two</p> </div> <script> var oDiv=document.getElementById("test"); console.log(oDiv.children[0] instanceof Node); //true console.log(oDiv.children[0] instanceof Element); //true console.log(oDiv.childNodes[0] instanceof Node); //true console.log(oDiv.childNodes[0] instanceof Element); //false </script> </body> </html>
通過上面的程式碼我們可以看到,Element的children[0]仍為Element,是Node和Element的例項,Node的childNdoes[0]為Node,只是Node的例項,不是Element的例項。
children與childNode最大的不同就是children取到的是直接子節點,childNode取到的是所有的後代,且順序為每個子分支遞迴到葉子後在從頭查詢另一條分支。