Что такое DOM?

Вопрос

Что такое DOM и как он связан с HTML?

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

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

Подробный ответ

Когда браузер загружает HTML, он парсит текст и строит из него дерево объектов — DOM. Это не сам HTML-файл, а его представление в памяти:

• Каждый тег становится узлом-элементом (Element).
• Текст внутри тегов — текстовым узлом (Text).
• У узлов есть родители, дети и соседи — отсюда "дерево".

DOM — это API, предоставляемый браузером (часть Web API), а не часть языка JavaScript. Через него JS может:

• находить элементы (document.querySelector, getElementById);
• изменять содержимое и атрибуты (element.textContent, element.setAttribute);
• создавать/удалять узлы (document.createElement, element.remove());
• подписываться на события (element.addEventListener).

Важно отличать DOM от HTML: HTML — это исходная разметка (текст), DOM — живая структура в памяти, которая может отличаться от исходного HTML после манипуляций JS (например, в SPA разметка почти полностью генерируется скриптами).

Пример

<ul id="list">
  <li>Один</li>
  <li>Два</li>
</ul>

const list = document.getElementById('list')

// Чтение DOM
console.log(list.children.length) // 2

// Изменение DOM
const item = document.createElement('li')
item.textContent = 'Три'
list.appendChild(item)

// Теперь DOM отличается от исходного HTML,
// хотя в файле разметки третьего <li> нет

Дополнительные вопросы

• Чем DOM отличается от Virtual DOM, который используют Vue/React?
• Что такое reflow и repaint и почему частые манипуляции с DOM — это дорого?
• Как работает делегирование событий через DOM (event bubbling)?