Что такое DOM-дерево и как оно устроено?

Question

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

YeaHub · Accepted Answer

DOM (Document Object Model) — это не язык программирования, а стандартный, кроссплатформенный интерфейс, который позволяет программам и скриптам динамически получать доступ и обновлять содержание, структуру и стиль документа. Когда браузер загружает HTML-страницу, он парсит её и строит из элементов, атрибутов и текста древовидную структуру в памяти — DOM-дерево. Структура DOM-дерева Дерево состоит из узлов (nodes). Основные типы узлов: Документ (Document): корневой узел, представляющий весь документ. Элементы (Element nodes): узлы, соответствующие HTML-тегам (например,

,

). Текстовые узлы (Text nodes): содержат текстовое содержимое внутри элементов. Атрибуты (Attribute nodes): хотя они и являются частью DOM-спецификации, в большинстве современных API они не представлены как отдельные узлы в дереве, а являются свойствами узлов-элементов. Узлы связаны отношениями родитель-потомок-сиблинг, образуя иерархию. Пример HTML и соответствующего DOM Рассмотрим простой HTML: Пример

Заголовок

Параграф с жирным текстом.

DOM-дерево для этого документа будет выглядеть примерно так (в упрощённом виде): Документ (Document) ├── Элемент: │ ├── Элемент: │ │ └── Элемент: │ │ └── Текстовый узел: "Пример" │ └── Элемент: <body> │ ├── Элемент: <h1> │ │ └── Текстовый узел: "Заголовок" │ └── Элемент: <p> │ ├── Текстовый узел: "Параграф с " │ ├── Элемент: <strong> │ │ └── Текстовый узел: "жирным" │ └── Текстовый узел: " текстом." Как используется DOM? JavaScript получает доступ к DOM через глобальный объект document. С помощью методов DOM API (например, getElementById, querySelector, createElement) можно находить узлы, создавать новые, изменять их свойства, добавлять или удалять их из дерева. Любое изменение DOM-дерева немедленно отражается на отображаемой странице (этот процесс называется reflow и repaint). Практический пример кода // Находим элемент по id const header = document.getElementById('main-header'); // Изменяем его текстовое содержимое header.textContent = 'Новый заголовок'; // Создаём новый элемент const newParagraph = document.createElement('p'); newParagraph.textContent = 'Этот абзац добавлен через JavaScript.'; // Добавляем его в конец тела документа document.body.appendChild(newParagraph); // Меняем стиль элемента header.style.color = 'blue'; Вывод: Понимание DOM-дерева критически важно для любой клиентской разработки на JavaScript, так как это основной способ сделать веб-страницу интерактивной и динамической. DOM служит мостом между статическим HTML и живым, управляемым скриптами интерфейсом.

Что такое DOM-дерево и как оно устроено?

Короткий ответ

Длинный ответ

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

Пример HTML и соответствующего DOM

Как используется DOM?

Практический пример кода

Что такое DOM-дерево и как оно устроено?

Короткий ответ

Длинный ответ

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

Пример HTML и соответствующего DOM

Как используется DOM?

Практический пример кода