Document Object Model

HTML

HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile и CHTML Canvas Кодировки символов Document Object Model Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Фреймы HTML HTML5 audio и HTML5 video Скрипты в HTML Браузерный движок Quirks mode Таблицы стилей Каскадные таблицы стилей Unicode и HTML W3C и WHATWG Цвета HTML Web Storage WebGL Сравнение языков разметки документов браузеров браузерных движков для HTML HTML5 HTML5 Canvas HTML5 Media XHTML (1.1)

Пример иерархии объектов в HTML DOM

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

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

Изначально различные браузеры имели собственные модели документов (DOM), несовместимые с остальными. Для того чтобы обеспечить взаимную и обратную совместимость, специалисты международного консорциума W3C классифицировали эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в общую группу, носящую название W3C DOM.

Еще один интерфейс прикладного программирования, называемый JDOM, обеспечивает более высокий, чем W3C DOM, уровень для работы с XML-документами на Java.

История

История DOM переплетается с историей «войн веб-браузеров» в конце 1990-х годов между Netscape Navigator и Microsoft Internet Explorer, в частности, между JavaScript и JScript, первыми скриптовыми языками, за то, чтобы быть широко используемыми в механизме вёрстки для веб-браузеров.

Традиционный DOM

JavaScript был выпущен Netscape Communications в 1996 году в рамках Netscape Navigator 2.0. Конкурент Netscape – Microsoft выпустил позже в том же году Internet Explorer 3.0 с портом JavaScript, названным JScript. JavaScript и JScript позволяют разработчикам создавать интерактивные веб-страницы со стороны клиента. Ограниченные возможности обнаружения созданных пользователем событий и изменение документа HTML в первом поколении этих языков в итоге стали известны как “DOM уровень 0” или “Традиционный DOM”. Ни один независимый стандарт не был разработан для DOM уровень 0, но он был частично описан в спецификации HTML4.

Традиционный DOM был ограничен в типах элементов, к которым можно получить доступ. Такие элементы, как форма (form), ссылка (link) и изображение (image) могли быть ссылками с иерархическими именами, которые начинались с корня объекта документа. Иерархическое имя могло использовать либо имена, либо последовательный индекс общего элемента. Например, элемент form input может быть доступен как "document.formName.inputName" или как "document.forms[0].elements[0]".

Традиционный DOM давал возможность подтверждения формы с клиентской стороны и популярный эффект «трансформации объекта».

Промежуточный DOM

В 1997 году Netscape и Microsoft выпустили Netscape Navigator и Internet Explorer версии 4.0, добавив поддержку Dynamic HTML (DHTML), предоставляющего возможность изменения функциональности HTML документа при его загрузке. DHTML требовал расширений для элементарного объекта document, который был доступен в Традиционной реализации DOM. Хотя Традиционная реализация DOM была в значительной степени совместимой с того момента, как JScript был основан на JavaScript, расширения DOM для DHTML были разработаны параллельно каждым из создателей браузера и остались несовместимыми. Эти версии DOM стали известны как «Промежуточный DOM».

Промежуточные DOM давали возможность манипуляции свойствами Cascading Style Sheets (CSS), которые воздействуют на отображение документа. Они также обеспечивают доступ к новому свойству под названием «слои» через свойства «document.layers» (в Netscape Navigator) и «document.all» (в Internet Explorer). Из-за первоначальной несовместимости в Промежуточных DOM разработка общего браузера потребовала специальной обработки для каждого случая.

Более поздние версии Netscape Navigator отказались от поддержки Промежуточного DOM. Internet Explorer продолжает поддержку своего Промежуточного DOM для обратной совместимости.

Стандартизация

Организация World Wide Web Consortium (W3C), основанная в 1994 году, чтобы развивать и поддерживать открытые стандарты для World Wide Web, заставила Netscape Communications и Microsoft вместе с другими компаниями разработать стандарт для скриптовых языков браузера под названием «ECMAScript». Первая версия стандарта была опубликована в 1997 году. Более поздние выпуски JavaScript и JScript будут осуществлять стандарт ECMAScript для большей межбраузерной совместимости.

После выхода ECMAScript W3C начала работу над стандартизацией DOM. Изначальный стандарт DOM, также известный как «DOM уровень 1», был рекомендован W3C в конце 1998 года. Примерно в это же время вышел Internet Explorer 5.0 с ограниченной поддержкой DOM уровень 1. DOM уровень 1 обеспечил полную модель для всего HTML- или XML-документа, включая способ изменения любой части документа. Неадаптированные браузеры, например, Internet Explorer 4.x и Netscape 4.x, были широко используемы вплоть до 2000 года.

DOM уровень 2 был опубликован в конце 2000 года. Он ввел функцию "getElementById", а также модель событий и поддержку XML namespace и CSS. DOM уровень 3 — текущая версия спецификации DOM, опубликованная в апреле 2004 года, добавила поддержку XPath и обработку событий клавиатуры, а также интерфейс для сериализации документа как XML.

В 2005 году большая часть W3C DOM поддерживалась основными, удовлетворяющими ECMAScript, браузерами, включая Microsoft Internet Explorer version 6(2001 год), Opera, Safari и браузеры, основанные на Gecko (такие как Mozilla, Firefox, SeaMonkey и Camino).

Реализация DOM в веб-браузерах

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

 
if (document.getElementById && document.getElementsByTagName) {
    // если методы getElementById и getElementsByTagName
    // доступны, то можно относительно точно предположить поддержку W3CDOM.
 
    obj = document.getElementById("navigation")
    // далее идёт другой код с использованием возможностей W3CDOM.
    // .....
}

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

 
  function domImplementationTest(){
    var featureArray = ['HTML', 'XML', 'Core', 'Views',
                        'StyleSheets', 'CSS', 'CSS2', 'Events',
                        'UIEvents', 'MouseEvents', 'HTMLEvents',
                        'MutationEvents', 'Range', 'Traversal'];
    var versionArray = ['1.0', '2.0', '3.0'];
    var i;
    var j;
    if(document.implementation && document.implementation.hasFeature){
      for(i=0; i < featureArray.length; i++){
        for(j=0; j < versionArray.length; j++){
          document.write(
            'Поддержка расширения '+ featureArray[i] + ' версии ' + versionArray[j] + ' : ' + 
            (document.implementation.hasFeature(featureArray[i], versionArray[j]) ? 
            '<font style="color:green">true</font>' : '<font style="color:red">false</font>') + '<br/>'
          );
        }
        document.write('<br/>');
      }
    }
  }

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

Браузерный движок

Основная статья: Браузерный движок

Браузеры опираются на свой движок, когда происходит преобразование (парсинг) HTML-файлов в DOM. Некоторые браузерные движки, к примеру Trident/MSHTML и Presto, тем или иным образом имеют привязку к определённому браузеру - Internet Explorer и Opera, соответственно. Такие же, как WebKit и Gecko, используются во множестве различных браузеров, таких как Safari, Google Chrome, RockMelt, Firefox или Flock. Различные браузерные движки поддерживают стандарты DOM на разных уровнях соответствия.

См. также: Comparison of layout engines (Document Object Model)(англ.)

Библиотеки

Реализации DOM:

• libxml2
• MSXML
• Xerces – это реализация DOM на C++ , с компоновкой Java и Perl.

API, которые показывают реализации DOM

• JAXP(Java API for XML Processing) - API для доступа к провайдерам DOM.

Уровни W3C DOM

Текущим уровнем спецификаций DOM является Уровень 2, но тем не менее некоторые части спецификаций Уровня 3 являются рекомендуемыми W3C.

Уровень 0 

Включает в себя все специфические модели DOM, которые существовали до появления Уровня 1, например, document.images, document.forms, document.layers и document.all. Необходимо обратить внимание, что эти модели формально не являются спецификациями DOM, опубликованными W3C, а скорее являются информацией о том, что существовало до начала процесса стандартизации.

Уровень 1 

Базовые функциональные возможности DOM (HTML и XML) в документах, такие как получение дерева узлов документа, возможность изменять и добавлять данные.

Уровень 2 

Поддержка так называемого пространства имён XML <--filtered views--> и событий.

Уровень 3 

Состоит из шести различных спецификаций:

1. DOM Level 3 Core;
2. DOM Level 3 Load and Save;
3. DOM Level 3 XPath;
4. DOM Level 3 Views and Formatting;
5. DOM Level 3 Requirements;
6. DOM Level 3 Validation.

Эти спецификации являются дополнительными расширениями DOM.

Приложения

Веб-браузеры

Веб-браузеры не обязаны использовать DOM в обязательном порядке, чтобы исполнять HTML-документ. Однако DOM требуется для скриптов JavaScript, которые желают наблюдать или изменить веб-страницу динамически. Другими словами, Document Object Model — это инструмент, с помощью которого JavaScript видит содержимое HTML-страницы и состояние браузера.

Проблемы

Из-за несовместимости браузеров использование DOM иногда приводит к трудностям HTML-вёрстки и низкой надёжности страниц.

Спецификации

• Спецификация DOM Level 1
• Рекомендации W3C к Уровню 2:
  • Спецификация DOM Level 2 Core
  • Спецификация DOM Level 2 Views
  • Спецификация DOM Level 2 Events
  • Спецификация DOM Level 2 Style
  • Спецификация DOM Level 2 Traversal and Range
  • Спецификация DOM Level 2 HTML
• Рекомендации W3C к Уровню 3:
  • Спецификация DOM Level 3 Core
  • Спецификация DOM Level 3 Load and Save
  • Спецификация DOM Level 3 Validation
• Документы рабочей группы W3C к Уровню 3:
  • Спецификация DOM Level 3 XPath
  • Спецификация DOM Level 3 Views and Formatting
  • Требования к DOM

См. также

• DOM scripting
• JSON
• Prototype.js
• jQuery
• SAX
• JDOM
• SXML
• Ajax
• TinyXml
• RapidXml
• Application Object Model

Ссылки

• Раздел DOM на сайте Консорциума Всемирной паутины (W3C)  (англ.)
• Доклады по DOM (англ.)
• Учебники по DOM (англ.)
• DOM учебник с примерами и упражнениями (рус.)
• Какой уровень DOM поддерживает ваш браузер? (англ.)
• Что включает в себя каждый уровень DOM? (англ.)
• Скрипты W3C DOM и таблицы совместимости (англ.)
• Ссылка на Gecko DOM (англ.)
• Документация по khtml Library API (англ.)