HTML DOM Element children 屬性

定義和用法

children 屬性返回元素的子元素的集合。

children 屬性返回 HTMLCollection 對象。

另請參閱：

firstElementChild 屬性

lastElementChild 屬性

nextElementSibling 屬性

previousElementSibling 屬性

childElementCount 屬性

childNodes 屬性

HTML 節點與元素

在 HTML DOM（文檔對象模型）中，HTML 文檔是擁有（或沒有）子節點的節點集合。

節點指的是元素節點、文本節點和注釋節點。

元素之間的空白也是文本節點。

而元素只是元素節點。

子節點與子元素

childNodes 返回子節點（元素節點、文本節點和注釋節點）。

children 返回子元素（而非文本和注釋節點）。

同胞與元素同胞

同胞是“兄弟”和“姐妹”。

同胞是擁有相同父節點的節點（在相同的 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 支持 支持 支持 支持