实例
获取 body 元素的子元素集合:
var c = document.body.children;
定义和用法
children 属性返回元素的子元素的集合,是一个 HTMLCollection 对象。
提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量,然后使用序列号(index,起始值为0)访问每个子元素。
children 属性与 childNodes 属性的差别:
- childNodes 属性返回所有的节点,包括文本节点、注释节点;
- children 属性只返回元素节点;
浏览器支持
属性 | |||||
---|---|---|---|---|---|
children | 2.0 | 9.0* | 3.5 | 4.0 | 10.0 |
注:IE6 到 IE8 完全支持 children 属性,但是,返回元素节点和注释节点,IE9 以上版本只返回元素节点。
语法
element.children
技术细节
返回值: | HTMLCollection 对象,表示一个元素节点的集合,元素在集合中的顺序是在源码中的顺序。 |
---|---|
DOM 版本 | DOM 1 |
更多实例
实例
查看 div 有几个子元素:
var c = document.getElementById("myDIV").children.length;
实例
修改 div 元素第二个子元素的背景颜色:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
实例
获取 select 元素中第三个(索引为 2) 子元素的文本:
var c = document.getElementById("mySelect").children;
document.getElementById("demo").innerHTML = c[2].text;
实例
修改 body 元素所有子元素的背景颜色:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
其他扩展