首頁 > 開發者 > JavaScript
本文首發部落格園：http://jscode.cnblogs.com，轉載請註明出處。
關於Element跟Node的區別，cilldren跟childNodes的區別很多朋友弄不清楚，本文試圖讓大家明白這幾個概念之間的區別。
Node(節點)是DOM階層中的任何類型的對象的通用名稱，Node有很多類型，如元素節點，屬性節點，文本節點，注釋節點等，通過NodeType區分，常見的有：
| 節點類型 | NodeType |
|---|---|
| 元素element | 1 |
| 屬性attr | 2 |
| 文本text | 3 |
| 注釋comments | 8 |
| 文檔document | 9 |
更多節點類型參考：https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType
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 console.log(typeof oDiv.childNodes[0].children); //undefined console.log(typeof oDiv.childNodes[0].childNodes); //object </script></body></html>
通過上面的代碼我們可以看到，Element的children[0]仍為Element，是Node和Element的執行個體，Node的childNdoes[0]為Node，只是Node的執行個體，不是Element的執行個體。
同時，Node的children屬性為為undefined。
通過以上的講述，大家弄明白了嗎？
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
