DOM (Document Object Model)

Полученная в HTML/XHTML/XML страница отображается браузером. При этом с программной точки зрения каждый входящий в документ элемент (в том числе и сам документ) являются объектом. DOM — это не зависящий ни от платформы, ни от языка программирования программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому документов HTML, XHTML, XML; а также менять содержимое, структуру, оформление таких документов. Несмотря на все усилия специалистов W3C по стандартизации, модель DOM и поведение входящих в нее объектов до сих пор отличаются друг от друга в разных браузерах. Отличия несущественны, но они — есть. Поэтому для корректной работы клиентской части web-приложения лучше перед применением какой-либо особенности проверить, поддерживается ли данная особенность данным браузером. Для отображения страницы DOM не нужен, браузер при форматировании страницы и выводе ее на экран не обязан знать о существовании внутри него каких-то объектов. Но факт существования DOM дает возможность оживить клиентскую часть web-приложения, динамически изменяя содержимое и/или оформление страницы.

Согласно DOM-модели, документ является иерархией объекта. Каждый HTML-тэг образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент и так далее. Проще говоря, DOM — это представление документа в виде дерева объектов. Это дерево формируется за счет вложенной структуры тэгов и текстовых фрагментов страницы, каждый из которых образует отдельный узел.

Пусть есть следующая HTML-страница:

Заголовок.

Прекрасный документ.

В результате отображения указанной страницы в браузере будет создано следующее дерево объектов (рис. 1.4):

Рис. 1.4. Пример структуры объектов HTML-документа Каждый DOM-элемент является объектом, то есть предоставляет методы и свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

Существует несколько способов получить для последующих манипуляций данный конкретный элемент. Можно, например, взять родительский элемент, получить список всех его потомков и искать в списке. Можно получить по имени тэга массив всех элементов данного типа. Самый простой из всех возможных способов — это получение элемента по его идентификатору. Для этой цели в тэг добавляется атрибут id (уникальный в пределах данной страницы идентификатор):

Первыйстолбец.

Второйстолбец.

При таком подходе нужный нам элемент находится однозначно и очень просто.

Пример на языке JavaScript:

var myDiv = document. getElementByld («mydiv»);

Кроме элементов, их свойств и набора функций для манипуляции с ними, DOM предоставляет еще и события. Например, событие click происходит при клике мышкой на элементе, событие mouseover — когда указатель мыши перемещается над указанным элементом. На любое из предоставляемых событий можно посадить свой обработчик. Обычно обработчики называют по схеме «оп+имя_события». Указанное выше событие click можно перехватить, назначив на данный элемент функцию onclick:

onclick="alert ('Вы нажали на первый столбец') ;" >

Первый столбец.

Реакции на событие click можно достичь и иным способом, просто присвоив свойство onclick нужного нам элемента:

document.getElementByld («firstCell»).onclick = function () { alert («Спасибо, что нажали на первый столбец»);

};

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

Несмотря на все усилия международного web-консорциума, направленные на стандартизацию, единой DOM-модели в разных браузерах не существует до сих пор. Что-то работает только и исключительно в Microsoft Internet Explorer, что-то — только в Mozilla Firefox. Обойти данное обстоятельство несложно, но это требует определенных трудозатрат и внимания.