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

Q1. childNodes到底是什么？

????childNodes 直譯意思就是子元素節(jié)點

Q2. 節(jié)點包含什么？

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

????即，多個元素組成的數(shù)組對象。

例子代碼：

<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的子節(jié)點數(shù)量為：'+?Num);
????for(var?i=0;i<Num;i++){
????????console.log('節(jié)點序號：'+(i+1));
????????console.log('節(jié)點類型：'+testChildEle[i].nodeType);
????????console.log('節(jié)點名稱：'+testChildEle[i].nodeName);
????}
</script>

說明：

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

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

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

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

建議：

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