目录

HTML DOM 元素 childNodes

示例

获取 <body> 元素的子节点:

const nodeList = document.body.childNodes;
亲自试一试 »

获取"myDIV"中的子节点数量:

let numb = document.getElementById("myDIV").childNodes.length;
亲自试一试 »

下面有更多示例。


描述

这个childNodes属性返回元素的子节点的集合(列表)。

这个childNodes属性返回一个节点列表目的。

这个childNodes属性是只读的。

childNodes[0]是相同的firstChild

重要的!

childNodes回报节点:元素节点、文本节点、注释节点。

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

选择:

孩子们的属性

这个children属性回报元素(忽略文字和注释)。

也可以看看:

第一个子属性

最后一个子属性

下一个兄弟属性

previousSibling 属性

hasChildNodes() 方法

节点属性

父节点属性

节点名称属性

节点类型属性

节点值属性

HTML 节点与元素

在里面HTML 文档对象模型(文档对象模型),HTML 文档是带有(或不带有)子节点的节点的集合。

节点分别是元素节点、文本节点和注释节点。

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

元素只是元素节点。


子节点 vs 子节点

子节点返回孩子节点(元素节点、文本节点和注释节点)。

孩子们返回孩子元素(不是文本和注释节点)。


兄弟姐妹 vs 元素兄弟姐妹

兄弟姐妹是"brothers" 和"sisters"。

兄弟姐妹是具有相同父节点的节点(在同一子节点列表)。

元素兄弟姐妹是具有相同父级的元素(在同一孩子们列表)。



语法

element.childNodes

返回值

类型 描述
对象 A节点列表节点的对象集合。
节点按照它们在文档中出现的方式进行排序。

更多示例

更改第二个子节点的背景颜色:

element.childNodes[1].style.backgroundColor = "yellow";
亲自试一试 »

获取 <select> 元素的第三个子节点的文本:

let text = document.getElementById("mySelect").childNodes[2].text;
亲自试一试 »

浏览器支持

element.childNodes是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11