children子属性返回一个活动的HTMLCollection,它包含指定父元素的所有子元素。
集合中的元素按照它们在源代码中出现的顺序进行排序。
您可以使用索引号访问集合中的各个子元素,并且索引从0开始。
使用length属性确定子元素的数量,然后可以遍历所有子元素。
注意:如果父元素没有子元素,则子元素是一个长度为0的空列表。
此属性与childNodes之间的区别在于,childNodes包含所有节点,包括文本节点和注释节点,而子节点仅包含元素节点。
ParentElement.children
var list = document.body.children;测试看看‹/›
表格中的数字指定了完全支持children属性的第一个浏览器版本:
属性 | |||||
children | 1 | 3.5 | 10 | 4 | 9 |
返回值: | 表示元素节点集合的实时HTMLCollection对象 |
---|---|
DOM版本: | DOM级别1 |
找出DIV元素有多少个子元素:
var len = document.querySelector("div").children.length;测试看看‹/›
更改DIV元素的第二个子元素(索引1)的背景色:
var parent = document.querySelector("div"); var list = parent.children; list[1].style.backgroundColor = "coral";测试看看‹/›
更改DIV元素的第一个子元素(索引0)的文本:
var parent = document.querySelector("div"); var list = parent.children; list[0].innerHTML = "HELLO WORLD";测试看看‹/›