Document Object Model

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 Сравнение языков разметки документов браузеров браузерных движков для HTML HTML5 HTML5 Canvas HTML5 Media XHTML (1.1)

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

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

• [www.w3.org/TR/REC-DOM-Level-1/ Спецификация DOM Level 1]
• Рекомендации W3C к Уровню 2:
  • [www.w3.org/TR/DOM-Level-2-Core/ Спецификация DOM Level 2 Core]
  • [www.w3.org/TR/DOM-Level-2-Views/ Спецификация DOM Level 2 Views]
  • [www.w3.org/TR/DOM-Level-2-Events/ Спецификация DOM Level 2 Events]
  • [www.w3.org/TR/DOM-Level-2-Style/ Спецификация DOM Level 2 Style]
  • [www.w3.org/TR/DOM-Level-2-Traversal-Range/ Спецификация DOM Level 2 Traversal and Range]
  • [www.w3.org/TR/DOM-Level-2-HTML/ Спецификация DOM Level 2 HTML]
• Рекомендации W3C к Уровню 3:
  • [www.w3.org/TR/DOM-Level-3-Core/ Спецификация DOM Level 3 Core]
  • [www.w3.org/TR/DOM-Level-3-LS/ Спецификация DOM Level 3 Load and Save]
  • [www.w3.org/TR/DOM-Level-3-Val/ Спецификация DOM Level 3 Validation]
• Документы рабочей группы W3C к Уровню 3:
  • [www.w3.org/TR/DOM-Level-3-XPath/ Спецификация DOM Level 3 XPath]
  • [www.w3.org/TR/DOM-Level-3-Views/ Спецификация DOM Level 3 Views and Formatting]
  • [www.w3.org/TR/DOM-Requirements/ Требования к DOM]

См. также

• AJAX
• JSON
• jQuery
• Prototype.js
• SAX
• JDOM

Ссылки

• [www.w3.org/DOM/ Раздел DOM на сайте Консорциума Всемирной паутины (W3C) ] (англ.)
• [xml.coverpages.org/dom.html Доклады по DOM] (англ.)
• [xml.com/pub/rg/DOM_Tutorials Учебники по DOM] (англ.)
• [www.w3.org/2003/02/06-dom-support.html Какой уровень DOM поддерживает ваш браузер?] (англ.)
• [www.mozilla.org/docs/dom/reference/levels.html Что включает в себя каждый уровень DOM?] (англ.)
• [www.quirksmode.org/dom/contents.html Скрипты W3C DOM и таблицы совместимости] (англ.)
• [mozilla.org/docs/dom/domref/ Ссылка на Gecko DOM] (англ.)
• [developer.kde.org/documentation/library/cvs-api/khtml/html/namespaceDOM.html Документация по khtml Library API] (англ.)

Отрывок, характеризующий Document Object Model

– Старичок и говорит: бог, мол, тебя простит, а мы все, говорит, богу грешны, я за свои грехи страдаю. Сам заплакал горючьми слезьми. Что же думаешь, соколик, – все светлее и светлее сияя восторженной улыбкой, говорил Каратаев, как будто в том, что он имел теперь рассказать, заключалась главная прелесть и все значение рассказа, – что же думаешь, соколик, объявился этот убийца самый по начальству. Я, говорит, шесть душ загубил (большой злодей был), но всего мне жальче старичка этого. Пускай же он на меня не плачется. Объявился: списали, послали бумагу, как следовает. Место дальнее, пока суд да дело, пока все бумаги списали как должно, по начальствам, значит. До царя доходило. Пока что, пришел царский указ: выпустить купца, дать ему награждения, сколько там присудили. Пришла бумага, стали старичка разыскивать. Где такой старичок безвинно напрасно страдал? От царя бумага вышла. Стали искать. – Нижняя челюсть Каратаева дрогнула. – А его уж бог простил – помер. Так то, соколик, – закончил Каратаев и долго, молча улыбаясь, смотрел перед собой.
Не самый рассказ этот, но таинственный смысл его, та восторженная радость, которая сияла в лице Каратаева при этом рассказе, таинственное значение этой радости, это то смутно и радостно наполняло теперь душу Пьера.


– A vos places! [По местам!] – вдруг закричал голос.
Между пленными и конвойными произошло радостное смятение и ожидание чего то счастливого и торжественного. Со всех сторон послышались крики команды, и с левой стороны, рысью объезжая пленных, показались кавалеристы, хорошо одетые, на хороших лошадях. На всех лицах было выражение напряженности, которая бывает у людей при близости высших властей. Пленные сбились в кучу, их столкнули с дороги; конвойные построились.
– L'Empereur! L'Empereur! Le marechal! Le duc! [Император! Император! Маршал! Герцог!] – и только что проехали сытые конвойные, как прогремела карета цугом, на серых лошадях. Пьер мельком увидал спокойное, красивое, толстое и белое лицо человека в треугольной шляпе. Это был один из маршалов. Взгляд маршала обратился на крупную, заметную фигуру Пьера, и в том выражении, с которым маршал этот нахмурился и отвернул лицо, Пьеру показалось сострадание и желание скрыть его.
Генерал, который вел депо, с красным испуганным лицом, погоняя свою худую лошадь, скакал за каретой. Несколько офицеров сошлось вместе, солдаты окружили их. У всех были взволнованно напряженные лица.
– Qu'est ce qu'il a dit? Qu'est ce qu'il a dit?.. [Что он сказал? Что? Что?..] – слышал Пьер.
Во время проезда маршала пленные сбились в кучу, и Пьер увидал Каратаева, которого он не видал еще в нынешнее утро. Каратаев в своей шинельке сидел, прислонившись к березе. В лице его, кроме выражения вчерашнего радостного умиления при рассказе о безвинном страдании купца, светилось еще выражение тихой торжественности.
Каратаев смотрел на Пьера своими добрыми, круглыми глазами, подернутыми теперь слезою, и, видимо, подзывал его к себе, хотел сказать что то. Но Пьеру слишком страшно было за себя. Он сделал так, как будто не видал его взгляда, и поспешно отошел.
Когда пленные опять тронулись, Пьер оглянулся назад. Каратаев сидел на краю дороги, у березы; и два француза что то говорили над ним. Пьер не оглядывался больше. Он шел, прихрамывая, в гору.
Сзади, с того места, где сидел Каратаев, послышался выстрел. Пьер слышал явственно этот выстрел, но в то же мгновение, как он услыхал его, Пьер вспомнил, что он не кончил еще начатое перед проездом маршала вычисление о том, сколько переходов оставалось до Смоленска. И он стал считать. Два французские солдата, из которых один держал в руке снятое, дымящееся ружье, пробежали мимо Пьера. Они оба были бледны, и в выражении их лиц – один из них робко взглянул на Пьера – было что то похожее на то, что он видел в молодом солдате на казни. Пьер посмотрел на солдата и вспомнил о том, как этот солдат третьего дня сжег, высушивая на костре, свою рубаху и как смеялись над ним.
Собака завыла сзади, с того места, где сидел Каратаев. «Экая дура, о чем она воет?» – подумал Пьер.
Солдаты товарищи, шедшие рядом с Пьером, не оглядывались, так же как и он, на то место, с которого послышался выстрел и потом вой собаки; но строгое выражение лежало на всех лицах.


Депо, и пленные, и обоз маршала остановились в деревне Шамшеве. Все сбилось в кучу у костров. Пьер подошел к костру, поел жареного лошадиного мяса, лег спиной к огню и тотчас же заснул. Он спал опять тем же сном, каким он спал в Можайске после Бородина.
Опять события действительности соединялись с сновидениями, и опять кто то, сам ли он или кто другой, говорил ему мысли, и даже те же мысли, которые ему говорились в Можайске.
«Жизнь есть всё. Жизнь есть бог. Все перемещается и движется, и это движение есть бог. И пока есть жизнь, есть наслаждение самосознания божества. Любить жизнь, любить бога. Труднее и блаженнее всего любить эту жизнь в своих страданиях, в безвинности страданий».
«Каратаев» – вспомнилось Пьеру.
И вдруг Пьеру представился, как живой, давно забытый, кроткий старичок учитель, который в Швейцарии преподавал Пьеру географию. «Постой», – сказал старичок. И он показал Пьеру глобус. Глобус этот был живой, колеблющийся шар, не имеющий размеров. Вся поверхность шара состояла из капель, плотно сжатых между собой. И капли эти все двигались, перемещались и то сливались из нескольких в одну, то из одной разделялись на многие. Каждая капля стремилась разлиться, захватить наибольшее пространство, но другие, стремясь к тому же, сжимали ее, иногда уничтожали, иногда сливались с нею.
– Вот жизнь, – сказал старичок учитель.
«Как это просто и ясно, – подумал Пьер. – Как я мог не знать этого прежде».
– В середине бог, и каждая капля стремится расшириться, чтобы в наибольших размерах отражать его. И растет, сливается, и сжимается, и уничтожается на поверхности, уходит в глубину и опять всплывает. Вот он, Каратаев, вот разлился и исчез. – Vous avez compris, mon enfant, [Понимаешь ты.] – сказал учитель.
– Vous avez compris, sacre nom, [Понимаешь ты, черт тебя дери.] – закричал голос, и Пьер проснулся.
Он приподнялся и сел. У костра, присев на корточках, сидел француз, только что оттолкнувший русского солдата, и жарил надетое на шомпол мясо. Жилистые, засученные, обросшие волосами, красные руки с короткими пальцами ловко поворачивали шомпол. Коричневое мрачное лицо с насупленными бровями ясно виднелось в свете угольев.
– Ca lui est bien egal, – проворчал он, быстро обращаясь к солдату, стоявшему за ним. – …brigand. Va! [Ему все равно… разбойник, право!]
И солдат, вертя шомпол, мрачно взглянул на Пьера. Пьер отвернулся, вглядываясь в тени. Один русский солдат пленный, тот, которого оттолкнул француз, сидел у костра и трепал по чем то рукой. Вглядевшись ближе, Пьер узнал лиловую собачонку, которая, виляя хвостом, сидела подле солдата.
– А, пришла? – сказал Пьер. – А, Пла… – начал он и не договорил. В его воображении вдруг, одновременно, связываясь между собой, возникло воспоминание о взгляде, которым смотрел на него Платон, сидя под деревом, о выстреле, слышанном на том месте, о вое собаки, о преступных лицах двух французов, пробежавших мимо его, о снятом дымящемся ружье, об отсутствии Каратаева на этом привале, и он готов уже был понять, что Каратаев убит, но в то же самое мгновенье в его душе, взявшись бог знает откуда, возникло воспоминание о вечере, проведенном им с красавицей полькой, летом, на балконе своего киевского дома. И все таки не связав воспоминаний нынешнего дня и не сделав о них вывода, Пьер закрыл глаза, и картина летней природы смешалась с воспоминанием о купанье, о жидком колеблющемся шаре, и он опустился куда то в воду, так что вода сошлась над его головой.
Перед восходом солнца его разбудили громкие частые выстрелы и крики. Мимо Пьера пробежали французы.
– Les cosaques! [Казаки!] – прокричал один из них, и через минуту толпа русских лиц окружила Пьера.
Долго не мог понять Пьер того, что с ним было. Со всех сторон он слышал вопли радости товарищей.
– Братцы! Родимые мои, голубчики! – плача, кричали старые солдаты, обнимая казаков и гусар. Гусары и казаки окружали пленных и торопливо предлагали кто платья, кто сапоги, кто хлеба. Пьер рыдал, сидя посреди их, и не мог выговорить ни слова; он обнял первого подошедшего к нему солдата и, плача, целовал его.
Долохов стоял у ворот разваленного дома, пропуская мимо себя толпу обезоруженных французов. Французы, взволнованные всем происшедшим, громко говорили между собой; но когда они проходили мимо Долохова, который слегка хлестал себя по сапогам нагайкой и глядел на них своим холодным, стеклянным, ничего доброго не обещающим взглядом, говор их замолкал. С другой стороны стоял казак Долохова и считал пленных, отмечая сотни чертой мела на воротах.
– Сколько? – спросил Долохов у казака, считавшего пленных.
– На вторую сотню, – отвечал казак.
– Filez, filez, [Проходи, проходи.] – приговаривал Долохов, выучившись этому выражению у французов, и, встречаясь глазами с проходившими пленными, взгляд его вспыхивал жестоким блеском.
Денисов, с мрачным лицом, сняв папаху, шел позади казаков, несших к вырытой в саду яме тело Пети Ростова.


С 28 го октября, когда начались морозы, бегство французов получило только более трагический характер замерзающих и изжаривающихся насмерть у костров людей и продолжающих в шубах и колясках ехать с награбленным добром императора, королей и герцогов; но в сущности своей процесс бегства и разложения французской армии со времени выступления из Москвы нисколько не изменился.
От Москвы до Вязьмы из семидесятитрехтысячной французской армии, не считая гвардии (которая во всю войну ничего не делала, кроме грабежа), из семидесяти трех тысяч осталось тридцать шесть тысяч (из этого числа не более пяти тысяч выбыло в сражениях). Вот первый член прогрессии, которым математически верно определяются последующие.
Французская армия в той же пропорции таяла и уничтожалась от Москвы до Вязьмы, от Вязьмы до Смоленска, от Смоленска до Березины, от Березины до Вильны, независимо от большей или меньшей степени холода, преследования, заграждения пути и всех других условий, взятых отдельно. После Вязьмы войска французские вместо трех колонн сбились в одну кучу и так шли до конца. Бертье писал своему государю (известно, как отдаленно от истины позволяют себе начальники описывать положение армии). Он писал:
«Je crois devoir faire connaitre a Votre Majeste l'etat de ses troupes dans les differents corps d'annee que j'ai ete a meme d'observer depuis deux ou trois jours dans differents passages. Elles sont presque debandees. Le nombre des soldats qui suivent les drapeaux est en proportion du quart au plus dans presque tous les regiments, les autres marchent isolement dans differentes directions et pour leur compte, dans l'esperance de trouver des subsistances et pour se debarrasser de la discipline. En general ils regardent Smolensk comme le point ou ils doivent se refaire. Ces derniers jours on a remarque que beaucoup de soldats jettent leurs cartouches et leurs armes. Dans cet etat de choses, l'interet du service de Votre Majeste exige, quelles que soient ses vues ulterieures qu'on rallie l'armee a Smolensk en commencant a la debarrasser des non combattans, tels que hommes demontes et des bagages inutiles et du materiel de l'artillerie qui n'est plus en proportion avec les forces actuelles. En outre les jours de repos, des subsistances sont necessaires aux soldats qui sont extenues par la faim et la fatigue; beaucoup sont morts ces derniers jours sur la route et dans les bivacs. Cet etat de choses va toujours en augmentant et donne lieu de craindre que si l'on n'y prete un prompt remede, on ne soit plus maitre des troupes dans un combat. Le 9 November, a 30 verstes de Smolensk».