Узлы документа

Типы узлов

Документ состоит из DOM-узлов. Один тип узлов Вы уже знаете - это элементы страницы. Есть и другие типы узлов. Их достаточно много, но на практике в основном, используются ещё два - текстовые узлы и комментарии. Создадим страницу, добавим на неё блок и рассмотрим, какие узлы он будет содержать:

8
9
10
11
12
13
14

<div id="block">
  Начало блока
  <a href="https://basecourse.ru">Ссылка</a>
  <!-- Комментарий -->
  <p>Абзац текста</p>
  <p>Ещё один абзац</p>
</div>

В примере создан блок, в котором содержатся следующие узлы:

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

Ктоме того, тэг <div> занимает несколько строк, и каждый перевод строки - это текст. Под них создаются текстовые узлы и их тоже нужно учитывать. Речь идёт о переводах строки в коде страницы, а не на странице. Сначала это может быть непонятным, ведь между тэгами <p> нет никакого текста. Но на самом деле, между ними есть перевод строки и под него создаётся текстовый узел. Можно расположить тэги в одну строку, тогда перевода строки не будет. Поэтому при каждом переводе строки создаётся ещё один узел.

Но с самими текстовыми узлами всё по-другому. Все переводы строки входят в текст и являются его частью. В том числе и те переводы, которые идут до и после текста, тоже входят в текст. Под них не создаются отдельные узлы. В нашем примере самым первым узлом является текст, а за ним идёт ссылка. Переводы строки до и после текста входят в сам текстовый узел. А вот после остальных строк создаются узлы с переводом строки.

Каджый тип узла имеет свой номер. У элемента это 1, у текста - 3, у комментария - 8.

Свойство nodeType содержит тип узла.

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

JavaScript:

16
17
18

let block = document.getElementById('block');
let blockIn = block.childNodes;
console.log(blockIn[0].nodeType); //выведет: 3

У нулевого узла тип: 3. Это значит текст. Определите тип какого-то другого узла. Если Вы хотите вывести типы всех узлов, это можно сделать через цикл.

Имя и тэг

У узлов есть свойство nodeName, которое содержит имя узла. Кроме того, у элементов есть свойство tagName, которое содержит тег. Имя у элементов совпадает с тегом, а у других узлов оно указывает тип узла. Выведем имя и тэг для ссылки:

19
20

console.log(blockIn[1].nodeName); //выведет: A
console.log(blockIn[1].tagName); //выведет: A

Обратите внимание, тэг пишется заглавными буквами. Выведете имя для других узлов.