關于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，
通過以上的講述，大家弄明白了嗎？
文章來自：https://www.cnblogs.com/jscode/archive/2012/09/04/2670819.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143004.html
標籤：JavaScript
上一篇：Node.js 常用工具
下一篇：Node.js 檔案系統