HTML DOM Element children na propyedad

Definasyon at paggamit

children Ang propyedad ay ibabalik ang koleksyon ng mga anak na elemento ng elemento.

children Ang propyedad ay ibabalik ang HTMLCollection na bintana.

Maaari mong tingnan din:

firstElementChild na propyedad

lastElementChild na propyedad

nextElementSibling na propyedad

previousElementSibling na propyedad

childElementCount na propyedad

childNodes na propyedad

HTML na bintana at elemento

Sa HTML DOMSa (Document Object Model), ang HTML na dokumento ay magkakaroon ng (o walang) mga anak na bintana.

BintanaIpinapaliliwanag ang bintana na bintana, talaan na bintana at punong-babala na bintana.

ElementoAng puwang sa pagitan din ay talaan na bintana.

At ang elemento lamang ay bintana na bintana.

Anak-bintana at anak-bintana na elemento

childNodes BabalikAnak-bintana（Mga bintana na bintana, mga talaan na bintana at mga punong-babala na bintana）.

children BabalikAnak-bintana（Hindi ang mga talaan at punong-babala na mga bintana）.

Kasamang bayan at kasamang elemento.

同胞Ang 'kaibigan' at 'kapatid'.

同胞是擁有相同父節點的節點（在相同的 childNodes 列表中）。

元素同胞是擁有相同父元素的元素（在相同的 children 列表中）。

實例

例子 1

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

const collection = document.body.children;

親自試一試

例子 2

"myDIV" 有多少子元素：

let count = document.getElementById("myDIV").children.length;

親自試一試

例子 3

更改 "myDIV" 的第二個子元素的背景：

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

親自試一試

例子 4

獲取 <select> 元素的第三個子元素（索引 2）的文本：

const collection = document.getElementById("mySelect").children[2].text;

親自試一試

例子 5

遍歷 <body> 的所有子元素並改變它們的背景：

const collection = document.body.children;
for (let i = 0; i < collecton.length; i++) {
  collection[i].style.backgroundColor = "red";
}

親自試一試

語法

element.children

返回值

類型 描述
對象

HTMLCollection 對象。

元素節點的集合。

元素以其在文檔中出現時進行排序。

瀏覽器支持

element.children 是 DOM Level 1 (1998) 特性。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持