定義和用法
childNodes 屬性返回節點的子節點集合，以 NodeList 對象。
提示：您可以使用 length 屬性來確定子節點的數量，然后您就能夠遍歷所有的子節點並提取您需要的信息。
瀏覽器支持
所有主流瀏覽器都支持 childNodes 屬性。
語法
element.childNodes
技術細節
| 返回值： | NodeList 對象，表示節點集合。 |
| DOM 版本 | Core Level 1 |
以上是定義來着w3cschool.com
DOM中節點的類型
DOM中一共有12中類型。但是我們常用的只有幾種。
首先我們了解下DOM中一般常見的節點類型有哪些？
1、元素節點
DOM中的原子都是元素節點，比如<body><table><div>等等。
如果把Web上的文檔比作一座大廈，則元素就是構成這塊大廈的磚石。一個文檔是由N個元素組成的。元素可包含其他元素。
2、文本節點
任意的文字、空格、換行、空白行都算是文本節點。
3、屬性節點
屬性節點，故名思議就是其他節點的屬性。例如所有的元素都有title屬性，在title='title1'就是一個屬性節點。
4、注釋節點
就是注釋了。
childNodes包含了哪些節點？
由childNodes屬性返回的數組中包含着所有類型的節點，所有的屬性節點和文本節點也包含在其中。（這一點存在疑問,下面有解釋）
事實上，文檔里幾乎每一樣東西都是一個節點，甚至連空格和換行符都會被解釋成節點。而且都包含在childNodes屬性所返回的數組中。
chidNoeds返回的事node的集合，
每個node都包含有nodeType屬性。
nodeType取值：
元素節點：1
屬性節點：2
文本節點：3
注釋節點：8
測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script> window.onload = function () { console.log("body的childNodes"); var oItems = document.body.childNodes; for (var i = 0; i < oItems.length; i++) { console.log("nodeType:" + oItems[i].nodeType); console.log("nodeName:" + oItems[i].nodeName); console.log("nodeValue:'" + oItems[i].nodeValue + "'"); } console.log("h1的childNodes"); getChildNodesAtrr(document.getElementsByTagName("h1")[0]); console.log("span的childNodes"); getChildNodesAtrr(document.getElementsByTagName("span")[0]); console.log("div的childNodes"); getChildNodesAtrr(document.getElementsByTagName("div")[0]); }; function getChildNodesAtrr(dom) { var oItems = dom.childNodes; for (var i = 0; i < oItems.length; i++) { console.log("nodeType:" + oItems[i].nodeType); console.log("nodeName:" + oItems[i].nodeName); console.log("nodeValue:'" + oItems[i].nodeValue + "'"); } } </script>
</head>
<body>
<h1>h1</h1>
<span>span</span>
<!--這是一個注釋--> 123 <div class="class1" title="title1"></div>
</body>
</html>
最終控制台的輸出結果：
body的childNodes
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:1
nodeName:H1
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:1
nodeName:SPAN
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:8
nodeName:#comment
nodeValue:'這是一個注釋'
nodeType:3
nodeName:#text
nodeValue:'
123
'
nodeType:1
nodeName:DIV
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'
'
h1的childNodes
nodeType:3
nodeName:#text
nodeValue:'h1'
span的childNodes
nodeType:3
nodeName:#text
nodeValue:'span'
div的childNodes
結果分析
1、分析結果，其中可以發現
nodeValue:'
123
'
這個其實是nodeValue:\n123\n，加引號只是為了能看出換行效果。
這說明空格和換行符確實被當成一個文本接單
2、元素包含文字時，元素節點本身的nodevalue是null，而它包含的文字成為了一個獨立的文本節點，這個文本節點的nodeValue才是我們之前設置的值。上例中的H1和SPAN都是這樣的，childNodes的長度為1。而div因為沒有內容所以div的childNodes的長度為0。
3、沒有發現有nodeType為2的節點類型
總結
在使用原生的childNodes時，包括提供的nodeValue，firstChild()，lastChild()等等。都需要注意其他元素類型的影響，因為我們通常操作的都是元素節點。而childNodes返回的集合中包含了很多意向不到的東西，在實際使用中和容易造成錯誤。
所以建議在使用childNodes時，最好通過nodeType將返回集合過濾一遍再進行使用，能夠避免很多不必要的問題。
疑問
實際測試發現並沒有發現有nodeType為2的node。不知道是和原因？希望有知道的大神告知。
以上哪有寫的不對的地方歡迎指正學習。^3^
歡迎轉載
轉載注明原創地址：http://www.cnblogs.com/Jersen/p/4908943.html