Дочерние элементы HTML DOM
Объект элементаПример
Получите коллекцию дочерних элементов элемента <body>:
const collection = document.body.children;
Ниже приведены дополнительные примеры.
Определение и использование
Свойство children
возвращает коллекцию дочерних элементов элемента.
Свойство children
возвращает объект HTMLCollection.
Разница
Свойство childNodes
возвращает все дочерние узлы , включая текстовые узлы и узлы комментариев, а children
свойство возвращает только дочерние элементы .
Смотрите также:
HTMLКоллекция
HTMLCollection — это коллекция узлов HTML.
Доступ к узлам в коллекции можно получить по порядковым номерам. Индекс начинается с 0.
Свойство length возвращает количество элементов в коллекции.
Синтаксис
element.children
Возвращаемое значение
Тип | Описание |
Объект | Объект HTMLCollection. Коллекция узлов элементов. Элементы сортируются по мере их появления в документе. |
Дополнительные примеры
Узнайте, сколько дочерних элементов имеет элемент <div>:
var c =
document.getElementById("myDIV").children.length;
Измените цвет фона второго дочернего элемента элемента <div>:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
Получите текст третьего дочернего элемента (индекс 2) элемента <select>:
var c = document.getElementById("mySelect").children[2].text;
Прокрутите все дочерние элементы <body> и измените цвет их фона на красный:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
Связанные страницы
Справочник по HTML DOM: свойство childNodes
Поддержка браузера
element.children
является функцией DOM уровня 1 (1998 г.).
Он полностью поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |
Объект элемента