Что такое DOM?

Содержание

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

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

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

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

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

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

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

Да, это действительно так и есть. Помните, 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 всё и происходит. JavaScript — это просто синтаксис, язык. Он может быть использован и вне браузера, где DOM API нет и в помине. Например, обратите ваше внимание на платформу Node.js.

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

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

Примечание

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