Document Object Model (DOM)

Document Object Model (DOM) – это универсальный инструмент, позволяющий JavaScript-разработчикам управляться с содержимым уже загруженной веб-страницы.

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

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

DOM – это модель, которая не зависит от того, где она выполняется и какой язык используется для её реализации.

Основная цель DOM – позволить веб-программисту создавать скрипты для динамического доступа к веб-странице и обновления частей её содержимого, структуры и стилей.

Стандартизация правил и рекомендаций вёрстки, проводимая консорциумом W3C затронула и DOM, теперь это де-факто стандарт в области работы с HTML-элементами.

История применения DOM и его современное состояние

DOM как объектная модель документа возник в 1995 году, во время острой конкурентной борьбы между двумя веб-браузерами – Internet Explorer и Netscape Navigator. Netscape Navigator проиграл, однако сейчас уже и Internet Explorer не столь широко представлен на рынке, как всего ещё пять лет назад.

Во время этой борьбы Document Object Model постепенно изменялась, и к 2005 году произошла почти полная стандартизация DOM компанией W3C, начавшаяся ещё в 1998 году. Современные браузеры поддерживают все основные функции DOM.

Перед тем, как разрабатывать веб-приложение, использующее редкие возможности DOM (например, обращение к объектам с помощью коллекций, в частности - нестандартной коллекции all), лучше будет добавить туда проверку во время загрузки приложения. Эта проверка с помощью специальных скриптов покажет, поддерживает ли браузер все те опции, которые вы собираетесь использовать.

Классификация типов, содержимого и функций DOCUMENT OBJECT MODEL

В рамках стандарта DOM выделяют три вида объектной модели документа:

1. Основная DOM – обычная модель для всех видов документов
2. XML-DOM – адаптированная для XML-документов модель объектного представления
3. HTML-DOM – то же для HTML.

Объектная модель документа выполняет важную задачу по регуляции взаимодействия между HTML-объектами. Для этого она определяет некоторые термины HTML в рамках стандартов ООП:

1. Сами HTML-элементы получают роль объектов
2. Атрибуты HTML-элементов получают роль свойств объектов
3. Регламентируются методы для доступа к объектам
4. Регламентируются события, возникающие при взаимодействии пользователя или веб-программы с объектами.

Исходя из этого, можно составить примерный список того, что можно реализовать в рамках DOM, этот список довольно обширен.

С помощью объектной модели документа программист может наделить своё веб-приложение следующими функциями:

1. JavaScript-приложение сможет добавить на страницу новые HTML-элементы и свойства к ним или к уже существующим объектам.
2. Приложение сможет удалить или изменить уже существующие HTML-элементы или отдельные их свойства.
3. JavaScript-приложение сможет создать новые события при объектах и отслеживать их.
4. После чего оно сможет отреагировать запуском того или иного метода в ответ на произошедшее событие.
5. Веб-приложение также может изменить стиль веб-страницы.

Базовая информация о свойствах, методах и объектах в рамках DOM

Эта концепция, которая является одной из базовых в объектно-ориентированном программировании, почти ничем не отличается от подобных аналогов в других отраслях IT. В данном конкретном случае под методами подразумеваются те действия, которые можно совершить над объектами (в том числе и с целью получить ту или иную информацию от них), а свойства – это значения атрибутов тех или иных HTML-элементов на странице.

Базовым объектом для DOM является Документ  – это вся веб-страница со всем её содержимым. Этот объект содержит три самых важных метода для поиска элементов:

1. getElementByID. Эта функция принимает на вход параметр ID, обозначающий идентификатор объекта, который требуется найти.
2. getElementsByTagName. Эта функция находит массив объектов определённого типа. На вход она принимает строковое значение тэга, по которому будет производиться фильтрация объектов.
3. getElementsByClassName. Эта функция находит массив объектов определенного класса. Класс элемента, в отличие от тэга, устанавливается создателем веб-страницы, что предоставляет программисту практически неограниченные возможности по классификации объектов.

Кроме функций для поиска, объект Документ (как, впрочем, и все его дочерние объекты) содержит методы и свойства для управления объектами.

1. Свойство innerHTML – позволяет получать и изменять полностью всё содержимое, лежащее между открывающим и закрывающим тегами найденного объекта.
2. setAttribute – эта функция позволяет присвоить некоторому свойству объекта определённое значение. Принимает на вход название свойства и значение.
3. Write – эта функция позволяет записать данные в основной поток (поверх готового документа).
4. Семейство функций Child (а именно, appendChild, replaceChild, removeChild) – позволяет управлять дочерними объектами.
5. Функция CreateElement – создаёт новый HTML-элемент.

Также конкретно объект Документ содержит целый ряд служебных свойств, которые позволяют получить важные данные о веб-странице:

1. Anchors – якоря на странице (ссылки на конкретную часть страницы)
2. Applets – места для дополнительных расширений
3. baseURI – адрес документа
4. body – всё, что написано в теге Body
5. cookie – получает куки документа
6. doctype – получает тип документа
7. head – всё, что написано в служебной части документа
8. forms, images, links, scripts – получает соответственно массивы форм, картинок и ссылок (в том числе визуальных), скриптов.
9. Title – заглавие документа
10. Readystate – состояние готовности документа
11. Inputencoding – кодировка документа

Узлы типа DOMNodelist

Вам нужно помнить, что коллекции всех элементов документа и их дочерних элементов составляют собой особый тип, не являющийся типичным JavaScript-массивом.

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

Представим, что нам необходимо очистить коллекцию. Изначально она выглядит так:

1. Первый элемент
2. Второй элемент
3. Третий элемент
4. Четвёртый элемент

Мы составили простейший скрипт, удаляющий по очереди каждый элемент. Но после его запуска, список выглядит так:

1. Второй элемент
2. Четвёртый элемент

Это произошло потому, что после удаления первого элемента второй элемент сразу же, ещё до окончания цикла, стал первым. А третий, соответственно, вторым, и в рамках того же цикла удалился. На его место тут же встал четвёртый. Понадобится ещё два раза запустить цикл, чтобы удалить действительно все элементы, либо переписать скрипт таким образом, чтобы он удалял первый элемент до тех пор, пока коллекция не опорожнится.

Выводы

Объектная модель документа (DOM) предоставляет программисту целый ряд возможностей, которые очень важны для работы с объектами веб-страницы. Главное - помнить об особенностях данной модели и знать основы объектно-ориентированного программирования.

Модель DOM является важнейшим компонентом современного сайтостроения. Без знания принципов работы DOM невозможно создавать эффективные интерактивные сайты, удобные для пользователя.

А после создания современного сайта со множеством функций, реализованных благодаря следованию стандартам объектной модели документа, крайне важно обеспечить бесперебойный доступ пользователей к нему. Для персональных сайтов или небольших проектов подойдет виртуальный хостинг. Крупные порталы имеет смысл размещать на виртуальных или выделенных серверах. Студиям веб-разработки, предоставляющим весь спектр услуг — от дизайна до хостинга, могут быть интересны реселлерские программы от ATLEX.Ru.