HTML DOM Element childNodes 属性

定义和用法

childNodes 属性返回元素子节点的集合（列表）。

childNodes 属性返回的是 NodeList 对象。

childNodes 属性是只读的。

childNodes[0] 与 firstChild 相同。

提示

childNodes 返回节点：元素节点、文本节点和注释节点。

元素之间的空白也是文本节点。

替代方案：

children 属性 - children 属性返回子元素（忽略文本和注释）。

另请参阅：

firstChild 属性

lastChild 属性

nextSibling 属性

previousSibling 属性

hasChildNodes() 方法

节点属性

parentNode 属性

nodeName 属性

nodeType 屬性

nodeValue 屬性

HTML 話節點與元素

在 HTML DOM（文檔對象模型）中，HTML 文檔是擁有（或沒有）子節點的節點集合。

節點指的是元素節點、文本節點和註釋節點。

元素之間的空白也是文本節點。

而元素只是元素節點。

子節點與子元素

childNodes 返回子節點（元素節點、文本節點和註釋節點）。

children 返回子元素（而非文本和註釋節點）。

同胞與元素同胞

同胞是“兄弟”和“姐妹”。

同胞是擁有相同父節點的節點（在相同的 childNodes 列表中）。

元素同胞是擁有相同父元素的元素（在相同的 children 列表中）。

實例

例子 1

獲取 <body> 元素的子節點：

const nodeList = document.body.childNodes;

親自試一試

例子 2

獲取 "myDIV" 中的子節點數：

let numb = document.getElementById("myDIV").childNodes.length;

親自試一試

例子 3

更改第二個子節點的背景顏色：

element.childNodes[1].style.backgroundColor = "yellow";

親自試一試

例子 4

獲取 <select> 元素的第三個子節點的文本：

let text = document.getElementById("mySelect").childNodes[2].text;

親自試一試

語法

element.childNodes

返回值

類型 描述
對象

節點的 NodeList 對象集合。

節點按照它們在文檔中出現的順序進行排序。

瀏覽器支持

element.childNodes 是 DOM Level 1 (1998) 特性。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持