Что такое DOM — и почему «исходный код» страницы тебе врёт
Смотри, неожиданная штука, на которой спотыкается каждый новичок. Открываешь страницу, жмёшь «Просмотр исходного кода» — видишь один HTML. Открываешь «Инспектор» (Элементы) — видишь совсем другой. Те же вроде бы вкладки, а содержимое разное. Это не глюк. Просто это два разных объекта, и тот, что «исходный код», — он показывает прошлое. А настоящая, живая страница — это DOM. Разберёмся, что это и почему путаница стоит новичкам часов отладки.
Что это такое в одной фразе
DOM (Document Object Model) — это живое дерево страницы, которое браузер строит из твоего HTML и держит в памяти. Ключевое слово — живое. HTML ты написал и забыл, он не меняется. А DOM меняется всё время, пока открыта вкладка.
Дерево — потому что элементы вложены друг в друга, как ветки: внутри <body> лежит <div>, внутри него — <p>, внутри — текст. Каждый элемент — это объект, к которому можно дотянуться кодом и поменять.
HTML — это чертёж, DOM — построенный дом
Лучшая аналогия вот какая. HTML — это чертёж дома. DOM — сам дом, который по чертежу построили.
Браузер читает твой HTML-файл (чертёж), один раз строит по нему дерево объектов (дом) — и дальше живёт уже в доме, а не в чертеже. Можно передвинуть мебель, пристроить комнату, снести стену — чертёж при этом не меняется. Так же и JavaScript: он меняет не твой HTML-файл, а готовый DOM. Файл на диске остаётся прежним.
Поэтому говорить «JS меняет HTML» — неточно. JS меняет DOM. Файл он не трогает вообще.
Почему «Просмотр кода» ≠ то, что на экране
И вот разгадка с двумя вкладками. «Просмотр исходного кода» показывает тот самый чертёж — HTML ровно в том виде, в каком сервер прислал его браузеру. А «Инспектор» показывает текущий DOM — дом прямо сейчас, со всеми перестановками, которые успел сделать JavaScript.
На современных сайтах это небо и земля. Зайди на ленту любой соцсети, посмотри исходник — там почти пусто, пара строк. Потому что весь контент дорисовал JavaScript уже после загрузки, прямо в DOM. В исходнике его нет и быть не может.
Отсюда — классический баг новичка: «почему мой элемент не находится, я же вижу его на экране?» Чаще всего потому, что элемент добавился в DOM позже, скриптом, а твой код полез его искать слишком рано — когда в дереве его ещё не было.
Зачем это тебе на практике
Даже если ты вайб-кодишь и руками DOM не трогаешь, понимать его стоит по трём причинам. Во-первых, когда ИИ-агент пишет тебе код, который «находит кнопку и меняет текст» — он работает с DOM, и ты теперь видишь, что именно. Во-вторых, при отладке: видишь разницу исходника и Инспектора — сразу понимаешь, что контент рисует скрипт. В-третьих, для понимания, зачем вообще нужен React: он придуман как раз чтобы ты не возился с DOM руками — описываешь, как всё должно выглядеть, а React сам правит дерево. Если ещё не читал, загляни в что такое React — там это видно насквозь.
DOM — это то же самое, что HTML?
Нет. HTML — это текст, который ты пишешь и который присылает сервер. DOM — это структура из объектов, которую браузер строит из этого текста и держит живой в памяти. HTML — повод, DOM — результат.
Почему сайт пустой в «Просмотре кода»?
Потому что его контент рисует JavaScript уже после загрузки, прямо в DOM. Исходник показывает только то, что прислал сервер изначально — а это часто почти пустой каркас. Чтобы увидеть реальную страницу, смотри «Инспектор», а не «Исходный код».
Мне надо учить, как менять DOM руками?
Скорее всего нет. Современные инструменты вроде React делают это за тебя, и трогать DOM напрямую почти не приходится. Но саму картинку «браузер строит живое дерево» держать в голове полезно — она объясняет половину того, что происходит на странице.
Короткие уроки-истории, симулятор агента и ежедневная практика — в нашем мобильном приложении. Бесплатно.
Читайте дальше
Что такое REST API — и почему сервер каждый раз тебя «забывает»
Что такое React — и почему ты больше не трогаешь страницу руками
Что такое CORS — и почему ошибка в консоли это защита, а не баг
Что такое JWT — и почему сервер тебя не помнит, но всё равно пускает
Что такое 2FA — и почему она спасает, даже когда пароль уже украли
