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

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

JavaScript свойство childElementCount объекта ParentNode возвращает количество дочерних элементов конкретного узла. Свойство доступно только для чтения.

Свойство childElementCount возвращает тот же результат, что и element.children.length.

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

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

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

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

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

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

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

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

JavaScript синтаксис

const count = node.childElementCount;

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

DOM Standard.

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

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

Нажмите ▶, затем Click me: под кнопкой появится число 3 — два div и один p. Текст и комментарий внутри блока не учитываются. Добавьте элемент в index.html и сравните.

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>
<p id="result"></p>

main.js

JavaScript

const showChildElementCount = function () {
    const count = document.getElementById('myNode').childElementCount
    document.getElementById('result').innerHTML = 'Количество элементов: ' + count
}

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

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

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

Далее с использованием метода getElementById() находим элемент с глобальным атрибутом id равным значению result и с помощью свойства innerHTML вставляем в этот элемент текстовое содержимое со значением количества элементов, который содержит элемент с id равным значению myNode.

В результате будет выведено значение 3: текстовые узлы и узел комментария в это количество не входят.