Блок 1 · Урок 7 из 7

DOM — живое дерево вашей страницы

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

⏱ ≈ 7 минут 🌳 продолжение прошлого урока 🎯 цель: понять «the DOM»

Зачем это вам

«Обновим DOM», «элемента нет в DOM», «виртуальный DOM в React», «посмотри в Inspect» — агент роняет эти слова постоянно. За всеми ними стоит одно простое различие, которое почти никто не проговаривает: HTML — это не то же самое, что страница на экране. Поймёте разницу — и куча загадочных фраз агента (и «почему в исходном коде пусто, а на экране всё есть») станут очевидными. Для вашей аудитории это один из самых сильных моментов-«ага».

Из чертежа — в дом

Что делает браузер, когда открывает страницу

Сервер присылает HTML — обычный текст. Браузер читает его и строит из него дерево объектов в своей памяти. Вот это дерево и есть DOM.1,2

🧱 HTML — чертёж (текст)

<body>
  <div class="card">
    <h1>Магазин</h1>
    <button>Купить</button>
  </div>
</body>

То, что прислал сервер. Просто текст с угловыми скобками.

→ браузер строит

🌳 DOM — дерево в памяти

  • body
    • div.card
      • h1 «Магазин»
      • button «Купить»

Живые элементы, вложенные друг в друга. По ним можно ходить и менять.

📌 Почему «дерево». Каждый элемент вложен в родительский: button внутри div, div внутри body — как папки внутри папок. Отсюда слова агента «родительский элемент», «потомок», «узел» (node), «найти элемент в дереве».

Аналогия, которую можно пересказать

Чертёж и построенный дом

Возьмём дом из прошлого урока — и доведём до конца:

🧱 HTML— чертёж на бумаге. Сервер прислал лист с планом: где стены, где двери. Это ещё не дом.
🌳 DOM— дом, построенный по чертежу. Браузер собрал его в памяти; теперь по нему можно ходить, и он у вас перед глазами.
⚙️ JavaScript— жилец, который двигает мебель. Он переставляет вещи в готовом доме — и вы сразу это видите. Чертёж при этом не трогает.

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

Запомните одно различие

HTML — то, что прислали. DOM — то, что сейчас на экране.

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

Отсюда знаменитая загадка вайб-кодера: открываешь «Исходный код страницы» (View Source) — а там почти пусто, хотя на экране полно всего. Всё просто: View Source показывает чертёж (исходный HTML), а контент достроил JavaScript уже в доме (DOM). Чтобы увидеть дом — нужен Inspect / «Просмотреть элемент».

Что это даёт на практике

Фраза агента → что он имеет в виду

«Обновим / перерисуем DOM»
Поменяем живую страницу в памяти браузера. Исходный HTML-файл при этом не трогаем.
«Элемента нет в DOM / DOM ещё не готов»
Скрипт сработал раньше, чем браузер достроил дерево. Дом ещё не возведён — а мебель уже двигаем.
«Виртуальный DOM в React»
React держит лёгкую копию дерева, сравнивает и меняет в реальном DOM только то, что изменилось — чтобы было быстро (подробнее — блок 4).
«Посмотри в Inspect / Elements»
Открой живой DOM (дом). А «View source» — это исходный HTML (чертёж); они отличаются.

DOM (Document Object Model) — живое представление страницы в памяти браузера в виде дерева элементов; строится из HTML, меняется через JavaScript.

Узел / элемент (node) — одна «вещь» в дереве: заголовок, кнопка, div.

Родитель / потомок — кто в кого вложен (отношения в дереве).

Рендер / ре-рендер — (пере)построение видимой страницы из текущего состояния DOM.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Чем DOM отличается от HTML?

2. По клику на кнопку текст на странице меняется. Что именно меняет JavaScript?

3. Агент говорит: «элемент не найден в DOM». Вероятная причина?

4. «Просмотр исходного кода» (View Source) показывает почти пусто, но на экране полно контента. Почему?

Куда мы идём

Программа курса — 7 блоков