當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

childNodes详解

發(fā)布時(shí)間：2023/12/10 编程问答 37 豆豆

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

定義和用法

childNodes 屬性返回節(jié)點(diǎn)的子節(jié)點(diǎn)集合，以 NodeList 對(duì)象。

提示：您可以使用 length 屬性來確定子節(jié)點(diǎn)的數(shù)量，然后您就能夠遍歷所有的子節(jié)點(diǎn)并提取您需要的信息。

瀏覽器支持

所有主流瀏覽器都支持 childNodes 屬性。

語法

element.childNodes

技術(shù)細(xì)節(jié)

返回值：	NodeList 對(duì)象，表示節(jié)點(diǎn)集合。
DOM 版本	Core Level 1

以上是定義來著w3cschool.com

DOM中節(jié)點(diǎn)的類型

DOM中一共有12中類型。但是我們常用的只有幾種。

首先我們了解下DOM中一般常見的節(jié)點(diǎn)類型有哪些？

1、元素節(jié)點(diǎn)

DOM中的原子都是元素節(jié)點(diǎn)，比如<body><table><div>等等。

如果把Web上的文檔比作一座大廈，則元素就是構(gòu)成這塊大廈的磚石。一個(gè)文檔是由N個(gè)元素組成的。元素可包含其他元素。

2、文本節(jié)點(diǎn)

任意的文字、空格、換行、空白行都算是文本節(jié)點(diǎn)。

3、屬性節(jié)點(diǎn)

屬性節(jié)點(diǎn)，故名思議就是其他節(jié)點(diǎn)的屬性。例如所有的元素都有title屬性，在title='title1'就是一個(gè)屬性節(jié)點(diǎn)。

4、注釋節(jié)點(diǎn)

就是注釋了。

childNodes包含了哪些節(jié)點(diǎn)？

由childNodes屬性返回的數(shù)組中包含著所有類型的節(jié)點(diǎn)，所有的屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)也包含在其中。（這一點(diǎn)存在疑問,下面有解釋）

事實(shí)上，文檔里幾乎每一樣?xùn)|西都是一個(gè)節(jié)點(diǎn)，甚至連空格和換行符都會(huì)被解釋成節(jié)點(diǎn)。而且都包含在childNodes屬性所返回的數(shù)組中。

chidNoeds返回的事node的集合，

每個(gè)node都包含有nodeType屬性。

nodeType取值：

元素節(jié)點(diǎn)：1

屬性節(jié)點(diǎn)：2

文本節(jié)點(diǎn)：3

注釋節(jié)點(diǎn)：8

測(cè)試

<!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>

最終控制臺(tái)的輸出結(jié)果：

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:'這是一個(gè)注釋'
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

結(jié)果分析

1、分析結(jié)果，其中可以發(fā)現(xiàn)

nodeValue:'
123
'

這個(gè)其實(shí)是nodeValue:\n123\n，加引號(hào)只是為了能看出換行效果。

這說明空格和換行符確實(shí)被當(dāng)成一個(gè)文本接單

2、元素包含文字時(shí)，元素節(jié)點(diǎn)本身的nodevalue是null，而它包含的文字成為了一個(gè)獨(dú)立的文本節(jié)點(diǎn)，這個(gè)文本節(jié)點(diǎn)的nodeValue才是我們之前設(shè)置的值。上例中的H1和SPAN都是這樣的，childNodes的長(zhǎng)度為1。而div因?yàn)闆]有內(nèi)容所以div的childNodes的長(zhǎng)度為0。

3、沒有發(fā)現(xiàn)有nodeType為2的節(jié)點(diǎn)類型

總結(jié)

在使用原生的childNodes時(shí)，包括提供的nodeValue，firstChild()，lastChild()等等。都需要注意其他元素類型的影響，因?yàn)槲覀兺ǔ２僮鞯亩际窃毓?jié)點(diǎn)。而childNodes返回的集合中包含了很多意向不到的東西，在實(shí)際使用中和容易造成錯(cuò)誤。

所以建議在使用childNodes時(shí)，最好通過nodeType將返回集合過濾一遍再進(jìn)行使用，能夠避免很多不必要的問題。

疑問

實(shí)際測(cè)試發(fā)現(xiàn)并沒有發(fā)現(xiàn)有nodeType為2的node。不知道是和原因？希望有知道的大神告知。

以上哪有寫的不對(duì)的地方歡迎指正學(xué)習(xí)。^3^

歡迎轉(zhuǎn)載

轉(zhuǎn)載注明原創(chuàng)地址：http://www.cnblogs.com/Jersen/p/4908943.html

轉(zhuǎn)載于:https://www.cnblogs.com/Jersen/p/4908943.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。