首先要了解什么是node，節點的分類：元素節點、文本節點、等等 。 然后了解節點樹。

Q1. childNodes到底是什么？

????childNodes 直譯意思就是子元素節點

Q2. 節點包含什么？

????當JS使用childNodes獲取子元素節點時，獲取的內容是包含了父元素下的所有子元素集合的列表，是一個數組對象。

????即，多個元素組成的數組對象。

例子代碼：

<div?id="testEle">
????<div>div元素</div>
????<p>p元素<span>span元素</span></p>
????<input?type="text"?value="input元素">
????11111111
</div>
<script>
????var?testChildEle?=?document.getElementById('testEle').childNodes;
????var?Num?=?testChildEle.length;
????console.log('div的子節點數量為：'+?Num);
????for(var?i=0;i<Num;i++){
????????console.log('節點序號：'+(i+1));
????????console.log('節點類型：'+testChildEle[i].nodeType);
????????console.log('節點名稱：'+testChildEle[i].nodeName);
????}
</script>

說明：

不同瀏覽器對childNodes獲取的節點有不同解釋，以上代碼在IE和Chrome、Firefox瀏覽器中，會得到不同的結果。

另外，不同的書寫方式在相同瀏覽器中也會得到不同的結果，如把上面的HTML結構修改如下：

<div?id="testEle">
????<div>div元素</div><p>p元素<span>span元素</span></p><input?type="text"?value="input元素">11111111
</div>

和上面的例子看起來只是修改了斷行，并沒有實質性的改變，但在Chrome中輸出結果卻發生了改變。

建議：

由于childNodes的兼容性問題，同時可以替代該方法的實現方式有很多，所以實際應用中，比較少使用了。