HTML DOM children 属性
页面下方有更多实例。
定义和用法
children 属性以 HTMLCollection 对象的形式返回元素子元素的集合。
集合中的元素按其在源代码中的显示进行排序，可以通过索引号进行访问。索引从0开始。
提示: 可以使用 HTMLCollection 对象的 length 属性来确定子元素的数量，然后可以循环遍历所有子元素并提取所需的信息。
此属性与 childNodes 之间的区别在于，childNodes 包含所有节点，包括文本节点和注释节点，而子节点仅包含元素节点。
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| children | 2.0 | 9.0* | 3.5 | 4.0 | 10.0 |
*注意: IE6 到 IE8 完全支持 children 属性。然而，在这些版本中，它返回元素节点和注释节点。IE9+ 只返回元素节点。
语法
element.children
技术细节
| 返回值: | 一个活动的 HTMLCollection 对象，表示元素节点的集合。返回集合中的元素按其在源代码中的显示进行排序 |
|---|---|
| DOM 版本 | Core Level 1 Element Object |
更多实例
实例
更改 <div> 元素的第二个子元素的背景色:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
亲自试一试 »
c[1].style.backgroundColor = "yellow";
实例
获取 <select> 元素的第三个子元素（索引2）的文本:
var c = document.getElementById("mySelect").children[2].text;
亲自试一试 »
实例
循环浏览 <body> 的所有子对象，并将其背景色更改为红色:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
亲自试一试 »
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
相关页面
HTML DOM 参考手册: childNodes 属性
