码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM 元素 children

❮上一节 ❮ 元素对象参考 下一节❯

示例

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

const collection = document.body.children;
亲自试一试 »

下面有更多示例。

描述

这个children属性返回元素的子元素的集合。

这个children属性返回一个HTML集合目的。

也可以看看：

firstElementChild 属性

LastElementChild 属性

nextElementSibling 属性

previousElementSibling 属性

childElementCount 属性

childNodes 属性

HTML 节点与元素

在里面HTML 文档对象模型（文档对象模型），HTML 文档是带有（或不带有）子节点的节点的集合。

节点分别是元素节点、文本节点和注释节点。

元素之间的空白也是文本节点。

元素只是元素节点。

子节点 vs 子节点

子节点返回孩子节点（元素节点、文本节点和注释节点）。

孩子们返回孩子元素（不是文本和注释节点）。

兄弟姐妹 vs 元素兄弟姐妹

兄弟姐妹是"brothers" 和"sisters"。

兄弟姐妹是具有相同父节点的节点（在同一子节点列表）。

元素兄弟姐妹是具有相同父级的元素（在同一孩子们列表）。

语法

element.children

返回值

类型 描述
对象 AHTML集合目的。
元素节点的集合。
元素按照它们在文档中出现的方式进行排序。

更多示例

"myDIV" 有多少个孩子：

let count = document.getElementById("myDIV").children.length;
亲自试一试 »

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

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";
亲自试一试 »

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

const collection = document.getElementById("mySelect").children[2].text;
亲自试一试 »

循环 <body> 的所有子元素并更改其背景：

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

浏览器支持

element.children是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11
❮上一节 ❮ 元素对象参考 下一节❯