Объект Node. Навигация по DOM

Последнее обновление: 1.11.2015

Каждый отдельный узел, будь то html-элемент, его атрибут или текст, в структуре DOM представлен объектом Node. Этот объект предоставляет ряд свойств, с помощью которых мы можем получить информацию о данном узле:

  • childNodes: содержит коллекцию дочерних узлов

  • firstChild: возвращает первый дочерний узел текущего узла

  • lastChild: возвращает последний дочерний узел текущего узла

  • previousSibling: возвращает предыдущий элемент, который находится на одном уровне с текущим

  • nextSibling: возвращает следующий элемент, который находится на одном уровне с текущим

  • ownerDocument: возвращает корневой узел документа

  • parentNode: возвращает элемент, который содержит текущий узел

  • nodeName: возвращает имя узла

  • nodeType: возвращает тип узла в виде числа

  • nodeValue: возвращает или устанавливает значение узла в виде простого текста

Перебирем все дочерние узлы элемента:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="article">
		<h3>Заголовок статьи</h3>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var articleDiv = document.querySelector("div.article");
var nodes = articleDiv.childNodes;
for(var i=0; i<nodes.length;i++){

	var type = "";
	if(nodes[i].nodeType===1)
		type="элемент";
	else if(nodes[i].nodeType===2)
		type="атрибут";
	else if(nodes[i].nodeType===3)
		type="текст";
		
	console.log(nodes[i].nodeName + ": " + type);
}
</script>
</body>
</html>

С помощью метода document.querySelector("div.article") выбираем элемент div с классом article и пробегаемся по его дочерним узлам. И в цикле выводим имя узла и его тип с помощью свойств nodeName и nodeType. Каждому типу соответствует определенное число:

nodeType

Тип узла

1

элемент

2

атрибут

3

текст

Но несмотря на то, что в блоке div на странице только три узла: h3 и 2 параграфа, но консоль отобразит нам семь узлов.

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

Дело в том, что пробелы между узлами также считаются за отдельные текстовые узлы. Если бы пробелов не было:

<div class="article"><h3>Заголовок статьи</h3><p>Первый абзац</p><p>Второй абзац</p></div>

То при переборе мы бы обнаружили только три дочерних узла, как и ожидалось.

Навигация по узлам

Используя свойства nextSibling и previousSibling можно также пройтись по узлам в прямом или обратном порядке. Например, для прохода по элементам на той же станице мы могли бы использовать следующий код javascript:

var articleDiv = document.querySelector("div.article");

// получаем первый дочерний элемент
var node = articleDiv.firstChild;
console.log(node.nodeName);
// обращаемся к следующему узлу, пока он определен
while((node=node.nextSibling)!==null){

	console.log(node.nodeName);
}

Тут все аналогично, только в цикле мы обращаемся к следующему узлу, который находится на одном уровне с текущим (или сестринскому узлу). И результат будет такой же.

Также можно перебрать узлы в обратном порядке: сначала получаем последний узел, а затем обращаемся к предыдущему сестринскому узлу:

var articleDiv = document.querySelector("div.article");

// получаем последний дочерний элемент
var node = articleDiv.lastChild;
console.log(node.nodeName);
// обращаемся к предыдующему узлу, пока он определен
while((node=node.previousSibling)!==null){

	console.log(node.nodeName);
}
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850