базовый курс

ГРУППА КУРСА

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

Типы узлов

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

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
9
10
11
12
13
14
<div id="block">
Начало блока
<a href="http://basecourse.ru">Ссылка</a>
<!-- Комментарий -->
<p>Абзац текста</p>
<p>Ещё один абзац</p>
</div>

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

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

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

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

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

JavaScript:

16
17
18
var block = document.getElementById('block');
var block_in = block.childNodes;
console.log(block_in[0].nodeType); //выведет: 3

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

Имя и тэг

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

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

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