Узлы объектной модели dom

Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.

Узлы в модели DOM документа HTML могут быть следующих типов:

Тип	Что представляет
1	Элемент HTML
3	Текстовое содержимое тега HTML
8	Комментарий HTML
9	Корневой элемент иерархической структуры
11	Фрагмент документа

Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:

Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).

Текстовое содержимое элемента HTML хранится в специальном текстовом узле (тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов.

Например, рассмотрим следующий фрагмент документа HTML:

<P>Это <B>содержимое</B> абзаца <I>документа</I> HTML</P>

В объектной модели DOM он будет представлен следующим иерархическим деревом:

На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария (свойство nodeName равно #comment), являющихся листьями иерархического дерева объектов документа.

Перемещение по объектной модели

К узлам, и даже целым ветвям, можно получить доступ из сценария JavaScript, встроенного в документ. Концепция объектной модели документа позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это приводит к более простому и ясному коду по сравнению с кодом, реализующим изменение структуры документа в объектной модели DHTML.

На примере структуры, создаваемой вложенными списками, продемонстрируем, с помощью каких свойств объектов в модели DOM можно перемещаться по ее узлам:

<UL ID="parent">

<LI ID="Node1">Узел 1

<LI ID="Node2">Узел 2

<UL ID="inside">

<LI ID="Child1">Потомок 1

<LI ID="Child2">Потомок 2

<LI ID="Child3">Потомок 3

</UL>

<LI ID="Node3">Узел 3

</UL>

В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями "родства", показанной на рисунке:

Элементы с именами Node1, Node2 и Node3 являются узлами-потомками элемента-родителя с именем parent. В семействе childNodes объекта parent хранятся ссылки на всех потомков этого элемента (Node1, Node2 и Node3). Для получения ссылок на первого и последнего потомка узла в объектной модели предусмотрены соответственно свойства firstChild и lastChild.

Свойство parentNode объектов-потомков возвращает ссылку родителя объектов, поэтому значением этих свойств объектов Node1, Node2 и Node3 будет ссылка на узел parent.

Объекты Node1, Node2 и Node3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью своих свойств previousSibling (предыдущий ближайший родственник) и nextSibling (следующий ближайший родственник). Если у элемента-узла нет соответствующих ближайших родственников, то эти свойства возвращают значение null.

Конечно, если все элементы HTML документа заданы с уникальными атрибутами ID, то разработчику документа достаточно просто в сценариях получать ссылки на такие объекты-узлы (значение атрибута ID элемента является именем соответствующего ему объекта в языках сценариев с использованием модели DHTML и DOM). Но идентифицировать все элементы страницы дело утомительное, поэтому для перемещения по объектной модели можно использовать указанные выше свойства узлов.

Для изменения, установки или получения содержимого текстового узла (узлы остальных типов не имеют текстового содержимого ) в DOM используется свойство nodeValue, тогда как в модели DHTML следует применять свойства innerHTML и innerText для любого элемента HTML:

// Объектная модель DOM

Node.childNodes[0].nodeValue = "Новое содержимое";

// Модель DHTML

Node.innerHTML = "Новое содержимое";

Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В DOM текстовое содержимое элемента HTML может храниться в одном или нескольких узлах-потомках типа 3, непосредственно порождаемых элементом HTML. Тогда как в объектной модели DHTML достаточно использовать одно из свойств innerHTML или innerText объекта, соответствующего элементу HTML.

Для доступа к объектной модели DOM загруженной в браузер страницы HTML прежде всего необходимо иметь ссылку на корневой элемент #document. Она создается автоматически и хранится в объекте window.document. Получить в DOM ссылку на корневой объект документа, соответствующий элементу, задаваемому тегом <HTML> можно единственным способом — использовать свойство documentElement объекта document. После чего, используя приведенные выше свойства узлов DOM, переместиться к требуемому элементу HTML и его содержимому.