Дэвид Флэнаган - JavaScript. Подробное руководство, 6-е издание

document.all.tags("p”)[0] // Первый элемент <���р> в документе

После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект Document можно представить как дерево объектов Node , как изображено на рис. 15.1. Тип Node определяет свойства, позволяющие перемещаться по такому дереву, которые будут рассматриваться в разделе 15.3.1. Существует еще один прикладной интерфейс навигации по документу, как дерева объектов Element . Этот более новый (и часто более простой в использовании) прикладной интерфейс рассматривается в разделе 15.3.2.

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

parentNode

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

childNodes

Доступный для чтения объект, подобный массиву ( NodeList ), обеспечивающий «живое» представление дочерних узлов.

firstChild, lastChild

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

nextSibling, previousSibling

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

nodeType

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

nodeValue

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

nodeName

Имя тега элемента Element , в котором все символы преобразованы в верхний регистр.

С помощью этих свойств класса Node можно сослаться на второй дочерний узел первого дочернего узла объекта Document , как показано ниже:

document.childNodes[0].childNodes[1]

document.firstChild.firstChild.nextSibling

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

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

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

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

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

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

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

firstElementChild, lastElementChild

Похожи на свойства firstChild и lastChild , но возвращают дочерние элементы.

nextElementSibling, previousElementSibling

Похожи на свойства nextSibling и previousSibling , но возвращают братские элементы.

childElementCount

Количество дочерних элементов. Возвращает то же значение, что и свойство children.length .