JavaScript. Подробное руководство, 6-е издание, стр. 204

15.3.1. Документы как деревья узлов

Объект

<b>Document</b>
, его объекты
<b>Element</b>
и объекты
<b>Text</b>
, представляющие текстовые фрагменты в документе, - все они являются объектами
<b>Node</b>
. Класс
<b>Node</b>
определяет следующие важные свойства:

<b>parentNode</b>

Родительский узел данного узла или null для узлов, не имеющих родителя, таких как

<b>Document</b>
.

<b>childNodes</b>

Доступный для чтения объект, подобный массиву (

<b>NodeList</b>
), обеспечивающий «живое» представление дочерних узлов.

<b>firstChild, lastChild</b>

Первый и последний дочерние узлы или null, если данный узел не имеет дочерних узлов.

<b>nextSibling, previousSibling</b>

Следующий и предыдущий братские узлы. Братскими называются два узла, имеющие одного и того же родителя. Порядок их следования соответствует порядку следования в документе. Эти свойства связывают узлы в двусвязный список.

<b>nodeType</b>

Тип данного узла. Узлы типа

<b>Document</b>
имеют значение 9 в этом свойстве. Узлы типа
<b>Element</b>
- значение 1. Текстовые узлы типа
<b>Text</b>
- значение 3. Узлы типа
<b>Comments</b>
- значение 8 и узлы типа
<b>DocumentFragment</b>
- значение 11.

<b>nodeValue</b>

Текстовое содержимое узлов

<b>Text</b>
и
<b>Comment</b>
.

<b>nodeName</b>

Имя тега элемента

<b>Element</b>
, в котором все символы преобразованы в верхний регистр.

С помощью этих свойств класса

<b>Node</b>
можно сослаться на второй дочерний узел первого дочернего узла объекта
<b>Document</b>
, как показано ниже:

<b>document.childNodes[0].childNodes[1] </b>

<b>document.firstChild.firstChild.nextSibling</b>

Допустим, что рассматриваемый документ имеет следующий вид:

<b>&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;&lt;/head&gt;&lt;body&gt;Hello World!&lt;/body&gt;&lt;/html&gt;</b>

Тогда вторым дочерним узлом первого дочернего узла будет элемент

<b>&lt;body&gt;.</b>
В свойстве
<b>nodeType</b>
он содержит значение 1 и в свойстве
<b>nodeName</b>
- значение «BODY».

Однако, обратите внимание, что этот прикладной интерфейс чрезвычайно чувствителен к изменениям в тексте документа. Например, если в этот документ добавить единственный перевод строки между тегами

<b>&lt;html&gt;</b>
и
<b>&lt;head&gt;,</b>
этот символ перевода строки станет первым дочерним узлом (текстовым узлом
<b>Text</b>
) первого дочернего узла, а вторым дочерним узлом станет элемент
<b>&lt;head&gt;,</b>
а не
<b>&lt;body&gt;</b>
.

15.3.2. Документы как деревья элементов

Когда основной интерес представляют сами элементы документа, а не текст в них (и пробельные символы между ними), гораздо удобнее использовать прикладной интерфейс, позволяющий интерпретировать документ как дерево объектов

<b>Element</b>
, игнорируя узлы
<b>Text</b>
и
<b>Comment</b>
, которые также являются частью документа.

Первой частью этого прикладного интерфейса является свойство

<b>children</b>
объектов
<b>Element</b>
. Подобно свойству
<b>childNodes</b>
, его значением является объект
<b>NodeList</b>
. Однако, в отличие от свойства
<b>childNodes</b>
, список
<b>children</b>
содержит только объекты
<b>Element</b>
. Свойство
<b>children</b>
- нестандартное свойство, но оно реализовано во всех текущих броузерах. В IE это свойство было реализовано уже очень давно, и большинство других броузеров последовали его примеру. Последним основным броузером, реализовавшим его, стал Firefox 3.5.

Обратите внимание, что узлы

<b>Text</b>
и
<b>Comment</b>
не имеют дочерних узлов. Это означает, что описанное выше свойство
<b>Node.parentNode</b>
никогда не возвращает узлы типа
<b>Text</b>
или
<b>Comment</b>
. Значением свойства
<b>parentNode</b>
любого объекта
<b>Element</b>
всегда будет другой объект
<b>Element</b>
или корень дерева - объект
<b>Document</b>
или
<b>DocumentFragment</b>
.

Второй частью прикладного интерфейса навигации по элементам документа являются свойства объекта

<b>Element</b>
, аналогичные свойствам доступа к дочерним и братским узлам объекта
<b>Node</b>
:

<b>firstElementChild, lastElementChild</b>

Похожи на свойства

<b>firstChild</b>
и
<b>lastChild</b>
, но возвращают дочерние элементы.