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 支持 支持 支持 支持