Frontender Magazine

Что такое DOM?

Один из моих читателей недавно спросил у меня, что же такое DOM1. Он сказал, что слышал упоминания о DOM, но не уверен, что в точности понимает, что же это такое.

Давайте во всём разберемся.

DOM — это HTML, который я пишу? Нет. Не совсем.

HTML-код, который вы пишете, анализируется и преобразуется браузером впоследствии в DOM.

«Просмотр кода страницы» — это DOM? Нет. Не совсем.

Функция «просмотра кода страницы» всего лишь показывает HTML-код, формирующий страницу. Это практически тот самый HTML-код, который вы написали в редакторе.

Этот код может выглядеть несколько иначе, если, например, вы работаете с файлами шаблона в бэкенде, и не очень-то часто заглядываете в HTML-код, получаемый на выходе. Или, если перед публикацией страницы на сайте ваш HTML-код проходит через некоторый «процесс сборки». Этот код может, например, сжиматься перед публикацией или изменяться каким-либо другим способом.

В целом, режим просмотра кода страницы — немного странная штука. На самом деле, этот код интересен только разработчикам, но в то же время, все современные браузеры уже имеют встроенные инструменты для разработчиков (DevTools и аналоги). Вероятно, эта функция в современных браузерах изжила свою полезность.

А код в панели разработчика — это DOM? В общем, да!

Если вы откроете панель инструментов разработчика и увидите там что-то вроде HTML, то вы обнаружите, что на самом деле это — визуальное представление DOM. Ура, мы наконец-то нашли DOM!

Хммм. Но выглядит совсем как мой HTML-код

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

Но, чаще всего, всё совсем не так.

Когда визуальное представление DOM отличается от HTML-кода?

Например, если в вашем HTML-коде есть ошибки, и браузер исправил их за вас. Допустим, у вас есть элемент <table>, и вы пропустили обязательный элемент <tbody>. Браузер просто добавит этот элемент <tbody> за вас. Он будет присутствовать в DOM, поэтому вы сможете найти его с помощью JavaScript, или стилизовать с помощью CSS, даже если его нет в написанном вами HTML-коде.

И тем не менее, наиболее вероятная причина в различиях между написанным кодом и фактическим DOM в том, что...

JavaScript может динамически изменять DOM

Представьте, что в вашем HTML-коде есть пустой элемент, примерно вот такой:

<div id="container"></div>

А чуть ниже в коде есть немножко JavaScript'а:

<script>
    var container = document.getElementById("container");
    container.innerHTML = "Абра-кадабра!";
</script>

Даже если вы не знаете JavaScript, вы можете понять смысл этого фрагмента кода. На экране вы увидите Абра-кадабра!, потому что пустой div был заполнен новым содержимым.

Если вы откроете панель инструментов разработчика, чтобы посмотреть на визуальное представление DOM, то увидите:

<div id="container">Абра-кадабра!</div>

Это отличается от оригинального HTML-кода или от того, что вы увидите при просмотре исходного кода страницы.

Ajax и шаблонизация

Даже не углубляясь в эту тему, я готов утверждать, что вы понимаете то, что DOM будет очень сильно отличаться от оригинального HTML-кода при использовании AJAX для получения контента извне, и добавления его на страницу. Аналогичная ситуация происходит при загрузке данных и использовании их в клиентской шаблонизации.

Попробуйте открыть Gmail и посмотреть исходный код страницы. Вы обнаружите кучу скриптов и данных для первоначальной загрузки страницы. Совсем не похоже на интерфейс, который вы видите на экране.

JavaScript vs. DOM

По сути, JavaScript — это язык, понимаемый браузером, с помощью которого в нем делается множество операций. Все они происходят именно внутри DOM. Большая часть того, что вы бы назвали операциями JavaScript, на самом деле являются частью DOM API.

Например, мы можем написать код на JavaScript, который будет следить за срабатыванием события mouseenter на элементе. Этот элемент есть ни что иное, как узел DOM-дерева, и к этому узлу мы с помощью DOM-свойства подключаем обработчик. Срабатывание события происходит потому, что узел DOM-дерева распространяет его.

Ехал DOM через DOM

Я прощу прощения, если сформулировал что-то не совсем четко. Но, я надеюсь, вы всё поняли. DOM — это то, что связывает всё воедино, именно внутри DOM всё и происходит. JavaScript — это просто синтаксис, язык. Он может быть использован и вне браузера, где DOM API нет и в помине. Например, обратите ваше внимание на платформу Node.js.

Эта статья слишком поверхностная и недостаточно заумная для меня

Да, DOM — это «объектная модель документа», и всё в таком духе. Я не хотел, да и честно говоря, недостаточно компетентен, чтобы писать такие статьи. Вот вам парочка гораздо более исчерпывающих материалов:

Примечание

1. Здесь и далее по тексту, для краткости мы будем использовать термин DOM вместо аналогичного, но менее распространённого русскоязычного термина «Объектная модель документа», прим. редакции FM.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Chris Coyier
Сергей Смольников
Переводчик:
Сергей Смольников
Мой Круг:
http://sergey-smolnikov.moikrug.ru/
Twitter:
@smolnikov
GitHub:
smolnikov

Комментарии (5 комментариев, если быть точным)

Автар пользователя
havenchyk

Подскажите, где issues по сайту создать? Не нашел репозитория

Автар пользователя
SilentImp

https://github.com/FMRobot/engine/issues?state=open Тут например

Автар пользователя
plisovyi

Хоть вводи тегирование по уровню знаний. Статья ну прямо очень новичковая, в духе Криса. Я ожидал увидеть больше заумности.

Автар пользователя
ghost

Я не ошибался, когда представлял себе, что такое DOM ))

Автар пользователя
k-topolyan

Недавно оставил похожий комментарий к другой статье, но тут будет даже более уместно. Доступен перевод спецификации W3C DOM4 на русский: http://topolyan.com/w3c/w3c-dom4-ru.html