JavaScript Element children 属性

children属性返回元素的子元素的集合，作为HTMLCollection对象。集合中的元素按照它们在源代码中出现的顺序排序，并可通过索引号访问。索引从0开始。

提示：您可以使用HTMLCollection对象的length属性来确定子元素的数量，然后您可以遍历所有子项并提取所需的信息。此属性与childNodes之间的区别在于childNodes包含所有节点，包括文本节点和注释节点，而子节点仅包含元素节点。

实例：

获取<body>元素的子集合：

var c = document.body.children;

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
children	9.0+*	2.0+	3.5+	4.0+	10.0+

*注意： IE6到IE8完全支持children属性。但是，在这些版本中，它返回元素节点和注释节点。IE9+仅返回元素节点。

element.children

项目	描述
返回值：	一个实时HTMLCollection对象，表示元素节点的集合。返回集合中的元素按照它们在源代码中的显示进行排序
DOM版本	Core Level 1

找出<div>元素有多少个子元素：

var c = document.getElementById("myDIV").children.length;

尝试一下

更改<div>元素的第二个元素的背景颜色：

var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";

尝试一下

获取<select>元素的第三个元素的文本：

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

尝试一下