Открыть главное меню

Document Object Model

Пример иерархии объектов в 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» в 1995 году в рамках веб-браузера «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. Поскольку «JScript» был основан на «JavaScript» — традиционные реализации DOM были в значительной степени совместимы, однако расширения DOM для DHTML были разработаны параллельно каждым из создателей браузера и остались несовместимыми. Эти версии DOM стали известны как «промежуточный DOM».

Промежуточный DOM давал возможность манипулировать свойствами каскадных таблиц стилей (англ. «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», «Apple» и другие компании разработать стандарт для браузерных скриптовых языков под названием «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, опубликованная в апреле 2004 года, — добавила поддержку «XPath» и обработку событий клавиатуры, а также интерфейс для сериализации документа как «XML».

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

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

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

  
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, тем или иным образом имеют привязку к определённому браузеру (в данном случае, к Internet Explorer). Такие же движки как WebKit и Gecko используются во множестве различных браузеров, таких как Safari, Google Chrome, RockMelt, Firefox или Flock. Различные браузерные движки поддерживают стандарты DOM на разных уровнях соответствия.

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

БиблиотекиПравить

Уровни 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-вёрстки и низкой надёжности страниц.

СпецификацииПравить

См. такжеПравить

СсылкиПравить