當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

childNodes详解

發布時間：2023/12/10 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 childNodes详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

定義和用法

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

轉載于:https://www.cnblogs.com/Jersen/p/4908943.html

總結

以上是生活随笔為你收集整理的childNodes详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。