Зачем нужен DOM


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

🔹 Что такое DOM

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

Пример HTML:

<!DOCTYPE html>
<html>
<head><title>Page</title></head>
<body>
<p>Hello, world!</p>
</body>
</html>
DOM-дерево для этого кода будет выглядеть так:
Document
└── html
├── head
│ └── title
│ └── "Page"
└── body
└── p
└── "Hello, world!"

🔹 Основные цели и назначение DOM

1. Программное управление содержимым страницы

DOM позволяет через JavaScript:

  • получать доступ к элементам HTML (document.getElementById, querySelector)

  • изменять текст, атрибуты, классы, стили элементов

  • создавать, удалять или перемещать элементы

Пример:

document.getElementById('title').innerText = 'Новый заголовок';

2. Реакция на действия пользователя

DOM используется для добавления обработчиков событий:

document.querySelector('button').addEventListener('click', function() {
alert('Кнопка нажата');
});
События DOM включают:
- click, mousedown, mouseup     
- input, change      
- keydown, keyup      
- submit, scroll, load, resize и др.

3. Изменение структуры страницы «на лету»

DOM даёт возможность добавлять или удалять элементы на странице во время выполнения:

const p = document.createElement('p');
p.textContent = 'Новый параграф';
document.body.appendChild(p);

Это лежит в основе динамических веб-приложений.

🔹 Как браузер использует DOM

Когда HTML загружен, браузер выполняет:

  1. Парсинг HTML → DOM-дерево
    Создаётся структура объектов, отражающая иерархию документа.

  2. Парсинг CSS → CSSOM
    Строится CSS Object Model — дерево стилей.

  3. Объединение DOM и CSSOM → рендер-дерево

  4. Layout (расчёт позиций и размеров)

  5. Painting (отрисовка пикселей на экране)

Если JavaScript изменяет DOM (например, добавляет элементы), браузер запускает перерисовку (reflow/repaint).

🔹 DOM как API

DOM — это не язык, а интерфейс, т.е. набор объектов и методов, через которые можно работать с HTML. Он описан в спецификациях W3C и WHATWG.

Основные интерфейсы:

  • document — корень дерева, глобальный доступ

  • Element — базовый интерфейс для всех HTML-элементов

  • Node — базовый интерфейс для любых узлов (включая текст, комментарии)

  • Event — обработка событий

🔹 Типы узлов DOM

Каждый элемент DOM имеет тип. Основные:

  • Element (теги)

  • Text (текст внутри элементов)

  • Comment (комментарии)

  • Document (вся страница)

  • DocumentFragment (временное хранилище узлов)

Пример:

<p>Hello</p>

Имеет 1 элемент p, содержащий узел Text с содержимым "Hello".

🔹 Навигация по DOM

DOM предоставляет доступ к родителям, детям и соседним элементам:

- element.parentNode      
- element.children      
- element.firstChild, lastChild      
- element.nextSibling, previousSibling

Пример:

const listItem = document.querySelector('li');
const ul = listItem.parentNode;

🔹 Манипуляции с DOM

Примеры:

Изменение текста:

element.textContent = "Новый текст";

Изменение атрибутов:

element.setAttribute('class', 'highlighted');

Добавление элемента:

const div = document.createElement('div');
document.body.appendChild(div);

Удаление:

element.remove();

🔹 DOM и производительность

Изменения в DOM могут быть дорогими по ресурсам, особенно если они затрагивают layout или стиль (триггерят reflow/repaint). Поэтому важно:

  • минимизировать частые манипуляции

  • использовать DocumentFragment для массового добавления

  • избегать повторного доступа к свойствам, требующим перерасчёта (offsetHeight, clientWidth)

🔹 DOM и безопасность (XSS)

DOM может быть вектором для XSS-атак, если вставлять HTML без очистки:

element.innerHTML = userInput; // Опасно!

Рекомендуется использовать textContent или специализированные библиотеки для экранирования.

🔹 DOM и JavaScript-фреймворки

Библиотеки вроде React, Vue, Angular используют виртуальный DOM или собственные методы работы с DOM, чтобы оптимизировать производительность, уменьшить количество прямых изменений и повысить контроль.

🔹 DOM в других контекстах

  • SVG и MathML также входят в DOM.

  • DOM доступен в браузерах, но не в средах типа Node.js (там нет document, если не использовать эмуляторы, как jsdom).

Таким образом, DOM — это основа, через которую JavaScript может взаимодействовать с HTML-документом: читать и изменять содержимое, реагировать на действия пользователя, управлять структурой страницы. Он играет ключевую роль во фронтенде и в построении интерактивных веб-приложений.

29-06-2025
Easy 14 просмотров