HTML DOM 元素子元素
描述
The children
属性返回元素子元素的集合。
The children
属性返回一个 HTMLCollection 对象。
另请参阅
HTML 节点与元素
在 HTML DOM (文档对象模型) 中,HTML 文档是包含(或不包含)子节点的节点集合。
节点 是元素节点、文本节点和注释节点。
元素之间的空格也是文本节点。
元素 仅为元素节点。
childNodes 与 children
childNodes 返回子 节点 (元素节点、文本节点和注释节点)。
children 返回子 元素 (不包含文本节点和注释节点)。
兄弟节点与元素兄弟节点
兄弟节点 是“兄弟”和“姐妹”。
兄弟节点 是具有相同父节点的节点(位于相同的 childNodes 列表中)。
元素兄弟节点 是具有相同父节点的元素(位于相同的 children 列表中)。
语法
element.children
返回值
类型 | 描述 |
对象 | 一个 HTMLCollection 对象。 元素节点的集合。 元素按照它们在文档中的出现顺序排序。 |
更多示例
更改 "myDIV" 的第二个子元素的背景
const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";
亲自试一试 »
获取 <select> 元素的第三个子元素(索引 2)的文本
const collection = document.getElementById("mySelect").children[2].text;
亲自试一试 »
循环 <body> 的所有子元素并更改它们的背景
const collection = document.body.children;
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
亲自试一试 »
浏览器支持
element.children
是 DOM Level 1 (1998) 特性。
它在所有浏览器中均得到完全支持
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |