Свойство children HTML DOM

Объект Element HTML DOM

childrenПодатрибут возвращает активный набор HTMLCollection, который содержит все подэлементы указанного родительского элемента.

Элементы в наборе сортируются в том порядке, в котором они появляются в исходном коде.

Вы можете использовать индекс для доступа к различным подэлементам в наборе, и индекс начинается с 0.

Используйте атрибут length, чтобы определить количество подэлементов, после чего можно итерировать через все подэлементы.

Примечание:Если у родительского элемента нет подэлементов, то подэлементы представляют собой пустой список длиной 0.

Эта свойственность аналогичнаchildNodesРазница между ними заключается в том, что childNodes содержит все узлы, включая текстовые узлы и комментарии, в то время как childNodes содержит только элементные узлы.

Грамматика:

ParentElement.children

var list = document.body.children;

Совместимость браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает атрибут children:

Технические детали

Более примеров

Найдите, сколько у элемента 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";

Объект Element HTML DOM