Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript свойство childNodes

JavaScript Node

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

JavaScript свойство childNodes объекта Node возвращает коллекцию всех дочерних узлов необходимого узла в виде объекта NodeList. Свойство доступно только для чтения.


Обращаю Ваше внимание, что узлы в коллекции сортируются так, как они отображаются в исходном коде. Доступ к ним можно получить по индексным номерам, первый элемент коллекции будет соответствовать индексу 0. Пробел внутри элемента рассматривается как текстовый узел, а комментарий как узел комментария. Более подробно о типах узлов вы можете узнать из свойства nodeType объекта Node, которое возвращает числовое значение, представляющее тип узла.


Для того, чтобы определить количество дочерних узлов коллекции (объекта NodeList) используйте свойство length. Первый элемент коллекции NodeList будет соответствовать значению свойства firstChild, а последний значению lastChild.

Для того, чтобы получить коллекцию, которая содержит только элементы, то используйте свойство children объекта ParentNode.

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
childNodesДаДаДаДаДаДа

JavaScript синтаксис:

const nodes = node.childNodes;

node - Node

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

Document Object Model (DOM) Level 1

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойств nodeType и childNodes</title>
	</head>
	<body>
		<button onclick = "myFunc()">Show types</button> <!-- добавляем атрибут событий onclick -->
		<div id = "block">
		        <!-- my comment -->
		        <ul>
		                <li>list item</li>
		                <li>list item</li>
		                <li>list item</li>
		        </ul>
		</div>
		<p id = result"></p>
		<script>
	function myFunc() {
	  const parentElem = document.getElementById("block"), // находим элемент по id
                parentElemChildNodes = parentElem.childNodes, // возвращаем коллекцию всех дочерних узлов узла parentElem
                result = document.getElementById("result"); // находим элемент по id
	  
	  for(let i = 0; i < parentElemChildNodes.length; i++) { // проходим циклом по всей коллекции узлов
	    result.innerHTML +=  parentElemChildNodes[i].nodeType + "<br>"; // добавляем в содержимое элемента числовое значение, представляющее тип узла текущего элемента коллекции
	  }
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

В результате чего мы получили следующие значения:

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

Пример использования JavaScript свойств nodeType и childNodes
Пример использования JavaScript свойств nodeType и childNodes
JavaScript Node
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.