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

Типы узлов

Документ состоит из 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

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