Що таке DOM?
Опубліковано уВебтехнології

Що таке DOM?

У цій статті ти зрозумієш, що таке DOM, як браузер “бачить” веб-сторінку та як JavaScript може змінювати її в реальному часі.

Що таке DOM простими словами

DOM (Document Object Model) — це структура сторінки, яку створює браузер на основі HTML.

Простіше:

  • HTML — це код
  • DOM — це “жива” структура в браузері

Тобто браузер перетворює HTML у дерево об’єктів, з яким можна працювати.

Щоб краще зрозуміти базу, дивись що таке HTML і як він працює та як виглядає структура веб-сторінки.

Як виглядає DOM

DOM має вигляд дерева.

Наприклад HTML:

<body>
  <h1>Заголовок</h1>
  <p>Текст</p>
</body>

У DOM це виглядає так:

  • body
    • h1
    • p

Кожен елемент — це вузол (node).

Як створюється DOM

Коли ти відкриваєш сайт:

  1. браузер завантажує HTML
  2. читає його зверху вниз
  3. будує дерево DOM
  4. відображає сторінку

Цей процес детально описаний у що відбувається, коли ти відкриваєш сайт.

Навіщо потрібен DOM

DOM потрібен, щоб:

  • взаємодіяти зі сторінкою
  • змінювати контент
  • реагувати на дії користувача

Без DOM сторінка була б просто статичним HTML.

Як JavaScript працює з DOM

JavaScript може:

  • знаходити елементи
  • змінювати текст
  • додавати або видаляти блоки
  • реагувати на кліки

Приклад:

document.querySelector("h1").textContent = "Новий текст";

Це змінює заголовок на сторінці.

Детальніше про це: що таке JavaScript простими словами

DOM і CSS

DOM працює разом із CSS.

  • HTML → структура
  • DOM → модель
  • CSS → стиль

Коли змінюється DOM:

  • стиль автоматично оновлюється

Щоб зрозуміти це краще, дивись що таке CSS і для чого він потрібен.

Як DOM пов’язаний з адаптивністю

DOM дозволяє змінювати сторінку в реальному часі.

Разом з CSS:

  • сторінка підлаштовується під екран
  • змінюється структура

Це основа того, що таке адаптивний дизайн.

DOM і клієнт–сервер

DOM створюється на стороні клієнта (в браузері).

Про це важливо знати:

  • сервер відправляє HTML
  • браузер створює DOM

Детальніше: що таке клієнт і сервер

Чому DOM важливий

DOM — це основа:

  • інтерактивності
  • динамічних сайтів
  • сучасних веб-додатків

Без нього:

  • JavaScript не мав би з чим працювати

Часті помилки

  1. Думають, що DOM = HTML
  2. Не розуміють, що DOM створюється браузером
  3. Ігнорують вплив JavaScript на DOM

Висновок

DOM — це “жива” модель сторінки:

  • HTML — це код
  • DOM — це структура в браузері
  • JavaScript працює з DOM
  • CSS оформлює DOM

Саме DOM робить сайт динамічним і інтерактивним.

Позначки: