HTML DOM Element childNodes 属性
定义和用法
childNodes 属性返回元素子节点的集合（列表）。
childNodes 属性返回的是 NodeList 对象。
childNodes 属性是只读的。
childNodes[0] 与 firstChild 相同。
提示
childNodes 返回节点：元素节点、文本节点和注释节点。
元素之间的空白也是文本节点。
替代方案：
children 属性 - children 属性返回子元素（忽略文本和注释）。
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 | 支持 | 支持 | 支持 | 支持 |