Проектирование инт-прил / лекции / Проектирование инет приложений

Dom (Document Object Model)

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

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

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

<html>

<head>

<title>Заголовок</title>

</head>

<body>

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

</body>

</html>

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

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

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

<td id="firstCell">Первый столбец</td>

<td id="secondCell">Второй столбец</td>

</tr>

</table>

</div>

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

Пример на JavaScript:

var myDiv = document.getElementById("mydiv");

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

<td id="firstCell"

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

>Первый столбец</td>

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

document.getElementById("firstCell").onclick = function() {

alert("Спасибо, что нажали на первый стоблец");

};

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

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

// Хотим добавить обработчик на событие click.

// Где-то раньше мы объявили функцию clickHandler,

// реализующую некоторые действия. И теперь хотим

// зарегистрировать нашу функцию таким образом,

// чтобы она автоматически вызывалась при клике

// элемента element.

if ( element.attachEvent ) {

// Существование у элемента атрибута attachEvent

// говорит о том, что мы находимся внутри браузера

// MSIE.

element.attachEvent( "onclick", clickHandler );

} else {

// Все остальные браузеры поддерживают предложенное

// Web-консорциумом решение. Третий параметр

// определяет, на какой фазе будет отрабатываться

// наша функция, на фазе перехвата (true) или на

// фазе "всплывания" (false).

element.addEventListener( "click", clickHandler, false );

};

Содержание