HTML HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile[англ.] и CHTML Document Object Model Кодировки символов Мнемоники в HTML Редактор HTML Элементы HTML Семантическая вёрстка Карта изображений Цвета HTML Формы HTML Фреймы HTML HTML5 audio и HTML5 video Canvas Скрипты в HTML Unicode и HTML[англ.] Браузерный движок Quirks mode Каскадные таблицы стилей W3C и WHATWG Web Storage WebGL Сравнение языков разметки документов браузерных движков .mw-parser-output .hlist dl,.mw-parser-output .hlist.hlist ol,.mw-parser-output .hlist.hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li,.mw-parser-output .hlist .mw-empty-elt{display:none}.mw-parser-output .hlist dt:after{content:": "}.mw-parser-output .hlist dd:after,.mw-parser-output .hlist li:after{content:"\a0 · ";font-weight:bold}.mw-parser-output .hlist dd:last-child:after,.mw-parser-output .hlist dt:last-child:after,.mw-parser-output .hlist li:last-child:after{content:none}.mw-parser-output .hlist dd dd:first-child:before,.mw-parser-output .hlist dd dt:first-child:before,.mw-parser-output .hlist dd li:first-child:before,.mw-parser-output .hlist dt dd:first-child:before,.mw-parser-output .hlist dt dt:first-child:before,.mw-parser-output .hlist dt li:first-child:before,.mw-parser-output .hlist li dd:first-child:before,.mw-parser-output .hlist li dt:first-child:before,.mw-parser-output .hlist li li:first-child:before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child:after,.mw-parser-output .hlist dd dt:last-child:after,.mw-parser-output .hlist dd li:last-child:after,.mw-parser-output .hlist dt dd:last-child:after,.mw-parser-output .hlist dt dt:last-child:after,.mw-parser-output .hlist dt li:last-child:after,.mw-parser-output .hlist li dd:last-child:after,.mw-parser-output .hlist li dt:last-child:after,.mw-parser-output .hlist li li:last-child:after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li:before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child:before,.mw-parser-output .hlist dt ol>li:first-child:before,.mw-parser-output .hlist li ol>li:first-child:before{content:" ("counter(listitem)"\a0 "}.mw-parser-output .hlist-items-nowrap dd,.mw-parser-output .hlist-items-nowrap dt,.mw-parser-output .hlist-items-nowrap li{white-space:nowrap}.mw-parser-output .hlist-items-nowrap dl dl,.mw-parser-output .hlist-items-nowrap dl ol,.mw-parser-output .hlist-items-nowrap dl ul,.mw-parser-output .hlist-items-nowrap ol dl,.mw-parser-output .hlist-items-nowrap ol ol,.mw-parser-output .hlist-items-nowrap ol ul,.mw-parser-output .hlist-items-nowrap ul dl,.mw-parser-output .hlist-items-nowrap ul ol,.mw-parser-output .hlist-items-nowrap ul ul{white-space:normal}.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}.mw-parser-output .infobox .navbar{font-size:100%}.mw-parser-output .navbox .navbar{display:block;font-size:100%}пор
Пример иерархии объектов в 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 для обратной совместимости.

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

[править | править код]
WHATWG 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.
    // ….
}

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

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

[править | править код]

См. также

[править | править код]

Ссылки

[править | править код]