childNodes详解
定義和用法
childNodes 屬性返回節(jié)點的子節(jié)點集合，以 NodeList 對象。
提示：您可以使用 length 屬性來確定子節(jié)點的數量，然后您就能夠遍歷所有的子節(jié)點并提取您需要的信息。
瀏覽器支持
所有主流瀏覽器都支持 childNodes 屬性。
語法
element.childNodes技術細節(jié)
| 返回值： | NodeList 對象，表示節(jié)點集合。 |
| DOM 版本 | Core Level 1 |
?
?
?
以上是定義來著w3cschool.com
DOM中節(jié)點的類型
DOM中一共有12中類型。但是我們常用的只有幾種。
首先我們了解下DOM中一般常見的節(jié)點類型有哪些？
1、元素節(jié)點
DOM中的原子都是元素節(jié)點，比如<body><table><div>等等。
如果把Web上的文檔比作一座大廈，則元素就是構成這塊大廈的磚石。一個文檔是由N個元素組成的。元素可包含其他元素。
2、文本節(jié)點
任意的文字、空格、換行、空白行都算是文本節(jié)點。
3、屬性節(jié)點
屬性節(jié)點，故名思議就是其他節(jié)點的屬性。例如所有的元素都有title屬性，在title='title1'就是一個屬性節(jié)點。
4、注釋節(jié)點
就是注釋了。
?
childNodes包含了哪些節(jié)點？
由childNodes屬性返回的數組中包含著所有類型的節(jié)點，所有的屬性節(jié)點和文本節(jié)點也包含在其中。（這一點存在疑問,下面有解釋）
事實上，文檔里幾乎每一樣東西都是一個節(jié)點，甚至連空格和換行符都會被解釋成節(jié)點。而且都包含在childNodes屬性所返回的數組中。
?
chidNoeds返回的事node的集合，
每個node都包含有nodeType屬性。
nodeType取值：
元素節(jié)點：1
屬性節(jié)點：2
文本節(jié)點：3
注釋節(jié)點：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、分析結果，其中可以發(fā)現
nodeValue:'
123
'
這個其實是nodeValue:\n123\n，加引號只是為了能看出換行效果。
這說明空格和換行符確實被當成一個文本接單
2、元素包含文字時，元素節(jié)點本身的nodevalue是null，而它包含的文字成為了一個獨立的文本節(jié)點，這個文本節(jié)點的nodeValue才是我們之前設置的值。上例中的H1和SPAN都是這樣的，childNodes的長度為1。而div因為沒有內容所以div的childNodes的長度為0。
3、沒有發(fā)現有nodeType為2的節(jié)點類型
總結
在使用原生的childNodes時，包括提供的nodeValue，firstChild()，lastChild()等等。都需要注意其他元素類型的影響，因為我們通常操作的都是元素節(jié)點。而childNodes返回的集合中包含了很多意向不到的東西，在實際使用中和容易造成錯誤。
所以建議在使用childNodes時，最好通過nodeType將返回集合過濾一遍再進行使用，能夠避免很多不必要的問題。
疑問
實際測試發(fā)現并沒有發(fā)現有nodeType為2的node。不知道是和原因？希望有知道的大神告知。
?
?
以上哪有寫的不對的地方歡迎指正學習。^3^
歡迎轉載
轉載注明原創(chuàng)地址：http://www.cnblogs.com/Jersen/p/4908943.html
轉載于:https://www.cnblogs.com/Jersen/p/4908943.html
總結
以上是生活随笔為你收集整理的childNodes详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MOSSE 相关滤波器详解
- 下一篇： 文本生成模型