children子屬性返回一個活動的HTMLCollection,它包含指定父元素的所有子元素。
集合中的元素按照它們在源代碼中出現(xiàn)的順序進(jìn)行排序。
您可以使用索引號訪問集合中的各個子元素,并且索引從0開始。
使用length屬性確定子元素的數(shù)量,然后可以遍歷所有子元素。
注意:如果父元素沒有子元素,則子元素是一個長度為0的空列表。
此屬性與childNodes之間的區(qū)別在于,childNodes包含所有節(jié)點,包括文本節(jié)點和注釋節(jié)點,而子節(jié)點僅包含元素節(jié)點。
ParentElement.children
var list = document.body.children;測試看看?/?
表格中的數(shù)字指定了完全支持children屬性的第一個瀏覽器版本:
屬性 | ![]() | ![]() | ![]() | ![]() | ![]() |
children | 1 | 3.5 | 10 | 4 | 9 |
返回值: | 表示元素節(jié)點集合的實時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";測試看看?/?