DOM. Об'єктна модель документу

Об'єктна модель документа

Об'єктна модель документа (DOM) — це програмний інтерфейс, який представляє HTML- або XML-документ у вигляді дерева об’єктів. Кожен вузол цього дерева (елемент, текст або коментар) є об’єктом з власними властивостями та методами, що дозволяють змінювати його вміст, структуру або стилі.

Основні характеристики DOM:

Незалежність від мови програмування: DOM розроблено так, щоб бути універсальним і використовуватись незалежно від мови. Найчастіше ним керують через JavaScript у браузерах.
Динамічність: DOM дозволяє додавати, змінювати або видаляти елементи під час виконання скриптів. Це дає змогу створювати інтерактивні веб-сторінки.
Структурованість: HTML-документ представлений у вигляді дерева, де кожен елемент є вузлом, а їхні взаємозв’язки (батько, дитина, сусід) формують ієрархію.

Схема DOM-дерева:

<!DOCTYPE html>
<html>
  <head>
    <title>hello, world</title>
  </head>
  <body>
    hello, world
  </body>
</html>

Таким чином, всі компоненти впорядковані в DOM ієрархічно, де кожен компонент представляє окремий вузол (node). Тобто кожен елемент, наприклад, елемент div, є вузол. Але також текст всередині елемента представляє окремий вузол.

У DOM існує 12 типів вузлів, але найчастіше використовується 4:

Документ: Об'єкт document, який представляє сам документ.
Елементи: HTML-теги (наприклад, <div>, <p>, <span>), що визначають структуру документа.
Текстові вузли: Вміст тексту всередині елементів.
Коментарі: Коментарі в HTML-коді.

Приклад роботи з DOM за допомогою JavaScript:

// Отримуємо елемент за його ID
const header = document.getElementById("site-header");

// Змінюємо текстовий вміст елемента
header.textContent = "Ласкаво просимо на наш сайт!";

Об'єктна модель документа

HTML-документ і DOM