logo
Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2

Document Object Model (dom)

DOM представляет HTML - документ как дерево объектов - узлов (node).

Корнем дерева считают объект document либо объект - узел <html>. Дочерними объектами узлами <html> являются узлы <head> и <body>, у которых, в свою очередь, есть собственные дочерние узлы. Возьмем небольшой фрагмент HTML документа:

<!-- пример pr27: -->

<HTML>

<HEAD>

<TITLE> Overview of the DOM </TITLE>

</HEAD>

<BODY>

<H1> Иерархия узлов </H1>

<P>

На вершине иерархии находится узел

<b> document </b>

,который представляет в DOM сам документ.

</P>

</BODY>

</HTML>

Раздел HEAD этого документа содержит элемент TITLE с текстом. Раздел BODY содержит заголовок первого уровня и параграф, в котором одно слово набрано телетайпным шрифтом. На следующей диаграмме показаны все узлы этого документа.

Узлы каждого типа (document, элементы, атрибуты и текст) имеют свой набор свойств и методов, которые позволяют через сценарии манипулировать ими.

Свойство nodeName– имя узла (только для чтения) возвращает имя HTML тэга, которому соответствует данный узел, например, p для параграфа или ul для ненумерованного списка. Для атрибутов nodeName возвращает название атрибута, а для тестовых узлов возвращает#text.

Свойство узла nodeType-тип узла (только для чтения) возвращает 1, 2 или 3 для узлов, соответствующих тэгу, атрибуту или тексту, соответственно.

Текстовые узлы имеют еще одно очень важное свойство: nodeValue. Это свойство для чтения и записи хранит содержание текстового узла. Для элементов оно возвращает null, а для атрибутов - значение атрибута.

Рассмотрим фрагмент документа:

<DIV>

<UL ID="components">

<LI>HTML</LI>

<LI>CSS</LI>

<LI>Javascript</LI>

</UL>

</DIV>

В DOM этому фрагменту соответствует ветка дерева узла<DIV>к узлу<UL>. Здесь она разветвляется на три веточки по числу узлов<LI>(узлы-атрибуты не принято включать в состав дерева). Каждый из этих узлов имеет по одному побегу, который заканчивается текстовым узлом.

Несколько других свойств узлов - объектов DOM: parentNode – ссылка на родительский узел, если он существует; childNodes – список дочерних узлов; firstChild – первый дочерний элемент; lastChild – последний дочерний эле-мент; previousSibling – указывает на предыдущий соседний узел, если у родительского узла несколько дочерних и текущий узел не первый дочерний; nextSibling – указывает на сле-дующий соседний узел, если у родительского узла несколько дочерних и текущий узел не последний дочерний; attributes – список атрибутов; ownerDocument – указатель на объект document, которому принадлежит текущий узел.