Метод children
Пример element.children
Получить коллекцию дочерних элементов элемента <body>:
const collection = document.body.children;
Попробуйте сами »
Ещё примеры ниже.
Описание children
Свойство children возвращает коллекцию дочерних элементов элемента.
Свойство children возвращает объект HTMLCollection.
Похожи на children
HTML Nodes и Elements
В HTML DOM (Document Object Model) HTML-документ представляет собой набор узлов с (или без) дочерними узлами.
Nodes — это узлы элементов, текстовые узлы и узлы комментариев.
Пробелы между элементами также являются текстовыми узлами.
Elements — это только узлы элементов.
childNodes и children
childNodes возвращает дочерние узлы (узлы элементов, текстовые узлы и узлы комментариев).
children возвращает дочерние элементы (не текстовые узлы и узлы комментариев).
Siblings и Element Siblings
Siblings — это «братья» и «сестры».
Siblings — это узлы с одним и тем же родителем (в одном и том же списке childNodes).
Element Siblings — это элементы с одним и тем же родителем (в одном и том же списке children).
Синтаксис children
element.children
Возвращаемое значение children
| Тип | Описание |
|---|---|
| Object | Объект HTMLCollection. Коллекция узлов элементов. Элементы сортируются по мере их появления в документе. |
Ещё примеры children
Сколько дочерних элементов у "myDIV":
let count = document.getElementById("myDIV").children.length;
Попробуйте сами »
Измените фон второго дочернего элемента "myDIV":
const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";
Попробуйте сами »
Получить текст третьего дочернего элемента (index 2) элемента <select>:
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";
}
Попробуйте сами »
Поддержка браузера children
element.children является функцией DOM уровня 1 (1998).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |