Что такое DOM в JavaScript: полное руководство

hannadev

DOM (Document Object Model) — это объектная модель документа, которая превращает HTML-код в структуру данных, с которой может работать JavaScript. Когда браузер загружает веб-страницу, он не просто отображает текст и картинки: он создаёт специальное дерево объектов, где каждый элемент может быть найден, изменён или удалён через код.

Зачем это нужно? Без DOM веб-страницы были бы статичными. С DOM же вы можете создавать интерактивные приложения: показывать и скрывать меню по клику, обновлять содержимое без перезагрузки, валидировать формы на лету. DOM — это мост между статичной HTML-разметкой и динамическими возможностями JavaScript.

Как браузер создаёт DOM

Когда вы открываете веб-страницу, браузер получает HTML-код от сервера и сразу же начинает его анализировать. Этот процесс называется парсингом. Браузер последовательно читает каждый тег, интерпретирует его и строит в памяти древовидную структуру — собственно, DOM-дерево.

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

После того как DOM создан, браузер раскрашивает страницу в соответствии с CSS-стилями и выводит результат вам на экран. Когда же вы изменяете DOM через JavaScript — например, добавляете новый элемент или меняете цвет текста — браузер тут же обновляет отображение на экране.

Процесс выглядит так:

Браузер получает HTML-код
Парсит его и строит DOM-дерево
Применяет CSS-стили
Отображает страницу пользователю
При изменении DOM обновляет экран

Структура DOM-дерева

ДОМ организован как иерархическое дерево. Представьте себе обычное родословное дерево: у каждого элемента есть родитель, дети и соседи. В DOM точно так же.

Корень дерева — это объект document. Это главная точка входа для работы с DOM. От document отходят узлы <html>, от неё — <head> и <body>, а внутри них — всё остальное. Каждый HTML-тег становится узлом этого дерева.

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

Узлы-элементы — это HTML-теги (<div>, <p>, <button> и так далее). Они образуют скелет страницы и содержат информацию об атрибутах (класс, id, стиль и прочее).
Текстовые узлы — это текст внутри тегов. Например, если у вас есть <p>Привет</p>, то слово «Привет» будет отдельным текстовым узлом.
Объект document — верхушка иерархии, представляющая весь документ целиком.
Комментарии — HTML-комментарии. Они видны в DOM, но не отображаются на странице.

Простой пример HTML-кода и его DOM-представления:

<!DOCTYPE html>
<html>
  <body>
    <h1>Заголовок</h1>
    <p>Это абзац текста.</p>
  </body>
</html>

В виде дерева это выглядит так:

document
├── html
│   └── body
│       ├── h1
│       │   └── "Заголовок"
│       └── p
│           └── "Это абзац текста."

Важно помнить: даже пустые места между тегами (пробелы, переносы строк) становятся текстовыми узлами в DOM. Это иногда забывают начинающие разработчики и потом удивляются, почему работа с DOM не так интуитивна, как казалось.

Как JavaScript работает с DOM

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

Мы работаем с DOM через объект document и методы, которые браузер нам предоставляет. Например, чтобы найти элемент по классу или id, мы используем querySelector. Чтобы создать новый элемент — createElement. Чтобы изменить текст — присваиваем новое значение свойству textContent.

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

Основные операции с DOM:

Поиск элементов — найти нужный тег в дереве по селектору, id или классу
Чтение данных — получить текст, значение атрибута или стиль элемента
Изменение содержимого — заменить текст или HTML внутри элемента
Изменение стилей — добавить или убрать CSS-класс, или напрямую менять свойства стиля
Создание элементов — добавить в страницу новые теги
Удаление элементов — убрать ненужные элементы из DOM
Работа с атрибутами — менять значения атрибутов (alt, src, href и так далее)

Примеры кода:

Изменить текст заголовка:

document.querySelector('h1').textContent = 'Новый заголовок';

Найти элемент по id и изменить его класс:

const button = document.getElementById('myButton');
button.classList.add('active');

Создать новый элемент и добавить его на страницу:

const newDiv = document.createElement('div');
newDiv.textContent = 'Я новый элемент';
document.body.appendChild(newDiv);

Связь между DOM и тем, что видит пользователь

Вот что нужно хорошо понимать: DOM и отображаемая страница связаны друг с другом. Это не два отдельных объекта, которые случайно синхронизированы. Это одно целое.

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

Обратное тоже работает. Когда пользователь вводит текст в форму, это значение автоматически попадает в DOM (в свойство value элемента input). Вы можете прочитать это значение через JavaScript, обработать его и использовать.

Эта связь делает веб-приложения интерактивными. Вы не просто смотрите на статичную картину. Вы можете в реальном времени видеть и изменять состояние всей страницы.

Практические примеры взаимодействия:

Пользователь кликает на кнопку → браузер генерирует событие → ваш код получает событие → вы меняете DOM → страница обновляется
Форма с выпадающим списком стран и списком городов: при выборе страны через JavaScript добавляются города в DOM → пользователь сразу видит новый список
Фильтрация товаров в магазине: пользователь выбирает фильтр → код скрывает или показывает товары в DOM → представление моментально обновляется

Почему DOM важен для разработчика

Если вы хотите создавать что-то большее, чем статичные веб-страницы, вам нужно хорошо разбираться в DOM. Понимание того, как браузер организует HTML-код в память, как элементы связаны друг с другом, как их искать и менять — это основа front-end разработки.

Много проблем, с которыми сталкиваются новички, вызваны неправильным пониманием структуры DOM. Например, вы ищете элемент, а он ещё не загрузился в DOM, поэтому поиск возвращает null. Или вы меняете HTML через innerHTML, и браузер перерисовывает половину страницы, что замедляет приложение. Или вы забыли, что текст внутри элемента — это отдельный узел, и не можете его найти.

Поэтому стоит потратить время на изучение DOM. Это инвестиция в ваши навыки разработчика.

На чём строится современный веб

Сегодня все крупные фреймворки (React, Vue, Angular) в той или иной мере работают именно с DOM. React создаёт virtual DOM для оптимизации. Vue использует реактивность для автоматического обновления. Angular создаёт свой слой абстракции над DOM. Но в конце концов все они манипулируют тем самым DOM-деревом, которое создал браузер.

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