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

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

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

Обращаю Ваше внимание на то, что возвращаемое значение содержит количество дочерних элементов узла, а не количество всех дочерних узлов (например, узлов текста и комментарии).

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`ParentNode.childElementCount`	Да	Да	Да	Да	9.0	Да

JavaScript синтаксис:

const count = node.childElementCount;

node - Document, DocumentFragment или Element

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

DOM

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования JavaScript свойства childElementCount</title>
	</head>
	<body>
		<button onclick = "showChildElementCount()">Click me</button>
		<div id = "myNode">
		       Техт
		       <div>My div</div>
		       <p>My paragraph</p>
		       Text
		       <div>My div2</div>
		       <--! Comment -->
		</div>
		<p id = "result"></p>
		<script>
	const showChildElementCount = function() {
	  const count = document.getElementById("myNode").childElementCount; // возвращаем количество дочерних элементов узла с id myNode.
	  document.getElementById("result").innerHTML = "Количество элементов: " + count; // вставляем в элемент текстовое содержимое со значением количества элементов
	};
		</script>
	</body>
</html>

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

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

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

Обратите внимание на то, что возвращаемое значение свойства childElementCount содержит количество дочерних элементов узла, а не количество всех дочерних узлов (текстовые узлы и узлы комментария не включаются).

Результат нашего примера:

Пример использования JavaScript свойства childElementCount

JavaScript ParentNode