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

DOM (от англ. Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Регламентирует способ представления содержимого документа (в частности веб-страницы) в виде набора объектов. Содержимое все что находиться на веб-странице: рисунки, ссылки, абзацы, текст и т. д. DOM связывает в единое целое HTML, язык сценариев (Java, PHP) и CSS, предоставляя разработчикам веб документов инструмент с совершенно новыми качествами (DHTML) Модель определяет логическую структуру документа и способ доступа и манипулирования составляющими документ элементами. Все что определено в документе тэгами HTML становится доступным для изменения, добавления и удаления.

Не накладывает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями родительский-дочерний.

Браузеры имели собственные модели документов (DOM), не совместимые с остальными.

Преимуществ модели:

1. Модель DOM гарантирует правильную грамматику и правильное оформление документов.

DOM трансформирует текстовый файл в абстрактное представление дерева узлов. Это позволяет полностью избежать таких проблем, как незакрытые или неправильно вложенные теги.

2. Модель DOM абстрагирует содержание от грамматики.

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

3. Модель DOM упрощает внутреннее манипулирование документом.

Задача разработчика, использующего модель DOM для модификации внутренней структуры файла, упрощается по сравнению с работой тех, кто для этой цели применяет традиционные механизмы манипулирования файлами.

Классификация:

· DOM уровня 0. Классическая объектная модель JavaScript. Указанная форма DOM -поддерживает общие коллекции объектов документа (forms [ ], images [ ], anchors [ ], links [ ] и applets [ ] ), и она уже была представлена в предыдущей главе.

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

· DOM уровня 2. Обеспечивает более совершенные возможности доступа к элементам страницы, , путем объединения моделей DOM уровня 0 и уровня 1 и добавления возможностей доступа к таблицам стилей для работы с ними. Состоит из следующих основных частей: DOM Core (ядро DOM). Задает типовую модель в виде древовидной структуры для просмотра и изменения документа, содержащего элементы разметки. DOM HTML. Определяет расширение ядра DOM для работы с HTML. Расширение DOM HTML обеспечивает возможности работы с документами HTML, используя синтаксис, типичный для традиционных объектных моделей JavaScript. DOM CSS. Определяет интерфейсы, необходимые для программного управления правилами CSS (язык разметки). DOM Events (события DOM). Добавляет в DOM средства обработки событий. Такими событиями могут быть как привычные события интерфейса пользователя, например щелчки кнопки мыши, так и специфические события, связанные с самой моделью DOM, происходящие при модификации дерева документа. DOM XML. Определяет расширение ядра DOM для работы с XML. Расширение DOM XML призвано обеспечить решение специфических задач XML — для работы с разделами CDATA, инструкциями, пространством имен и т.д. Согласно спецификации DOM, можно проверить доступность

· DOM Level 3 Самое современное дополнение DOM. Этот пакет стандартов поддерживается очень слабо (2009 год).

HTML-документы имеют иерархическую структуру, представленную в DOM в виде дерева.

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

Типичные узлы :

Document‑ обращение к DOM должно начинаться с обращения к данному узлу.

Элементные узлы‑ содержат элементы страниц.

Текстовый узел– хранит содержимое документов.

Атрибутный узел– хранит атрибуты

Отношения между узлами

Родительский узел (parent node) - узел, в который вложен рассматриваемый объект. Узлы-потомки (child node) - узел, который вложен в рассматриваемый объект. Узлы-братья (sibling node) - узлы находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. Самый верхний узел в DOM называется корневым.

Технология AJAX.

AJAX, Ajax ( «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. При обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

Принципы: 1)HTML используется для создания Web-форм. 2)JavaScript-код – это основной код, обеспечивает взаимодействие с серверными приложениями. 3)DHTML, или Dynamic HTML, помогает динамически обновлять формы. 4)DOM, Document Object Model (объектная модель документов), будет использоваться (через код JavaScript) для работы и со структурой HTML, и (в некоторых случаях) с XML, полученным от сервера.

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

Преимущества:

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

Уменьшение нагрузки на сервер.Общие элементы страниц генерируются по одному шаблону.

Ускорение реакции интерфейса.Благодаря динамическому обновлению страниц.

Недостатки

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

Динамически загружаемое содержимое недоступно поисковикам .Поисковые машины не могут выполнять JavaScript.

Старые методы учёта статистики сайтов становятся неактуальными

Усложнение проекта.Усложняется контроль целостности форматов и типов.

Требуется включенный JavaScript в браузере.Мб выключен из соображений безопасности.

Низкая скорость при грубом программировании.Если AJAX-запросов много на одной странице то скорость снижается.

Риск фабрикации запросов другими сайтами. Видимость того что пользователь посещал сайт.

Объект XMLHttpRequest

Объект XMLHttpRequest позволяет получать данные с сервера в фоновом режиме. Возвращаемая информация представляется в формате XML, но данный объект также позволяет работать с любыми текстовыми данными. Представляет набор API(Интерфейс программирования приложений) функций, используемый в JavaScript, VBScipt для передачи данных XML по протоколу HTTP.

Общий план работы с объектом XMLHttpRequest можно представить следующим образом:

1. Создание экземпляра объекта XMLHttpRequest.

2. Установка обработчика события onreadystatechange.

3. Открытие соединения с сервером методом open.

4. Непосредственно отправка запроса методом send.