JavaScript свойство ParentNode.children

Определение и применение

JavaScript свойство children объекта ParentNode возвращает живую коллекцию (HTMLCollection), которая содержит все дочерние элементы узла, на котором он был вызван. Свойство children исключает дочерние узлы, не являющиеся элементами Element, например, такие как Text (текстовый узел) и Comment (узел комментария). Свойство доступно только для чтения.

Доступ к отдельным дочерним узлам в коллекции можно получить с помощью метода item(), или с помощью нотации в стиле массива JavaScript.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Element.children

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
children	✓1	✓12	✓3.5	✓10	✓4	✓18	✓4	✓10.1	✓3	✓1.0	✓4.4	✓3

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const elements = node.children;

Спецификация

DOM Standard.

Пример использования

Перебор дочерних элементов блока

Нажмите ▶, затем Click me: в консоли появятся коллекция children, её длина и первые два элемента, а шрифт каждого дочернего элемента станет крупнее предыдущего. Текст и комментарий в коллекцию не входят.

index.html

HTML

<button data-migration-click-0="">Click me</button>
<div id="myNode">
  Text
  <div>My div</div>
  <p>My paragraph</p>
  Text
  <div>My div 2</div>
  <!--Comment -->
</div>

main.js

JavaScript

const showChildren = function () {
    const elements = document.getElementById('myNode').children
    console.log(elements)
    console.log(elements.length)
    console.log(elements[0])
    console.log(elements.item(1))

    let size = 12

    for (let i = 0; i < elements.length; i++) {
        size = size * 1.5
        elements[i].style.fontSize = size + 'px'
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    showChildren()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере мы разместили элемент <div>, внутри которого мы разместили два текстовых узла, один узел комментария и три элемента (два элемента <div> и один элемент <p>).

Кроме того, мы разместили в документе кнопку (элемент <button>), которой с помощью метода addEventListener() назначили функцию, которая срабатывает при нажатии. Эта функция при нажатии инициализирует переменную, которая с помощью метода getElementById() находит элемент с глобальным атрибутом id равным значению myNode и с помощью свойства children возвращает живую коллекцию (HTMLCollection), которая содержит все дочерние элементы узла, на котором он был вызван.

Далее мы выводим в консоль браузера содержимое коллекции, длину коллекции (свойство length), с помощью указания индекса массива выводим первый элемент коллекции, и с помощью метода item() выводим второй элемент коллекции. Кроме того, проходим циклом по всем элементам коллекции и устанавливаем размер шрифта в пикселях каждому элементу. Обратите внимание, что размер шрифта увеличивается в 1,5 раза на каждой итерации цикла за счет умножения значения переменной size.