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.
