HTML DOM children 属性

元素对象参考手册 元素对象

实例

获取 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"; }

尝试一下 »

元素对象参考手册 元素对象