Свойство children HTML DOM Element

Определение и использование

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 Поддержка Поддержка Поддержка Поддержка