Что такое DOM-дерево

DOM расшифровывается как Document Object Model. Это не сам HTML-файл и не картинка страницы. Это объектная модель документа, которую браузер строит после парсинга HTML и предоставляет JavaScript.

В дереве есть корневой объект документа, элементы, текстовые узлы, комментарии и другие типы узлов. Они связаны как родитель, дочерние узлы и соседи. Поэтому вы можете пройти по дереву, найти конкретный элемент и изменить его.

Короткий ответ на интервью может звучать так:

DOM-дерево это объектное представление HTML-документа в браузере. Каждый элемент и текст на странице представлен узлами, а JavaScript может работать с ними через DOM API: читать, изменять, добавлять и удалять. Это текущее состояние документа, поэтому оно может отличаться от HTML, который пришел с сервера.

DOM часто смешивают с другими сущностями. На интервью достаточно спокойно развести уровни.

HTML это исходная разметка. DOM это объектное дерево, которое браузер построил из этой разметки. CSSOM это модель CSS-правил. Render tree и дальнейшие стадии отрисовки нужны браузеру, чтобы понять, что и как рисовать на экране.

Простой пример: элемент с display: none остается в DOM. Вы можете найти его через querySelector, но он не участвует в видимой отрисовке. Значит, DOM отвечает не за все пиксели на экране, а за структуру документа и API доступа к ней.

Через DOM API вы можете искать элементы, менять текст, классы, атрибуты, слушать события и создавать новые узлы. Это база для динамического интерфейса без перезагрузки страницы.

const message = document.querySelector("[data-message]");
const button = document.querySelector("[data-update]");

if (!message || !button) {
  return;
}

const handleClick = () => {
  message.textContent = "Данные обновлены";
  message.classList.add("is-success");
};

button.addEventListener("click", handleClick);

В этом примере код находит узлы в DOM, проверяет, что они существуют, меняет текст и CSS-класс. Если селектор не нашел элемент, проверка защищает страницу от ошибки Cannot read properties of null. Если такой обработчик добавляется в виджете, который монтируется и удаляется, нужен cleanup через removeEventListener. Иначе можно получить дублирующиеся обработчики, утечку памяти или несколько одинаковых действий по одному клику.

Хороший ответ не заканчивается фразой, что браузер строит дерево из HTML. Важно добавить, что DOM это текущее состояние документа.

Браузер может исправить часть невалидной разметки, добавить служебные элементы, по-другому вложить узлы по правилам парсинга HTML. Потом JavaScript может добавить модальное окно, удалить элемент списка, поменять атрибут aria-expanded или обновить текст кнопки. Все это меняет DOM, хотя исходный HTML с сервера уже не меняется.

Это важно в отладке. Если вы смотрите View Source, вы видите исходный HTML. Если открываете Elements в DevTools, вы видите текущий DOM после парсинга и изменений скриптов.

Ручное изменение DOM должно сохранять не только картинку на экране, но и состояние интерфейса. Например, если кнопка открывает меню, недостаточно просто добавить класс видимости. Нужно обновить aria-expanded, при необходимости перевести фокус внутрь меню и вернуть фокус на кнопку при закрытии.

const button = document.querySelector("[data-menu-button]");
const menu = document.querySelector("[data-menu]");

if (button && menu) {
  button.addEventListener("click", () => {
    const isOpen = button.getAttribute("aria-expanded") === "true";

    button.setAttribute("aria-expanded", String(!isOpen));
    menu.hidden = isOpen;
  });
}

Если менять только menu.hidden или только класс, пользователь скринридера может услышать старое состояние кнопки. Пользователь клавиатуры может остаться с фокусом в скрытом элементе. Поэтому DOM-операции для интерактива проверяют через видимое состояние, фокус и доступные атрибуты.

DOM-операции не являются злом сами по себе. Проблемы начинаются, когда код часто меняет дерево, сразу читает размеры, потом снова меняет дерево. Браузер может быть вынужден синхронно пересчитать стили и layout, чтобы вернуть точное значение.

Плохой паттерн:

items.forEach((item) => {
  list.appendChild(renderItem(item));
  console.log(list.offsetHeight);
});

Здесь после каждой вставки код читает offsetHeight. Это может заставить браузер пересчитывать layout много раз.

Более безопасная идея:

const fragment = document.createDocumentFragment();

items.forEach((item) => {
  fragment.appendChild(renderItem(item));
});

list.appendChild(fragment);
console.log(list.offsetHeight);

Вы группируете записи, а размер читаете после обновления. В реальном приложении такой подход уменьшает лаги при больших списках и снижает нагрузку на главный поток.

Virtual DOM не является браузерным DOM. Это внутренняя структура, которую используют некоторые библиотеки, чтобы описать UI и вычислить, какие изменения нужно применить к реальному DOM. В React это часть процесса reconciliation и render pipeline, но пользователь в итоге все равно видит результат в настоящем DOM браузера.

Не стоит говорить, что virtual DOM всегда быстрее. Он помогает управлять сложным UI декларативно и уменьшать лишние ручные операции, но у него тоже есть стоимость. Создание объектов, сравнение деревьев и рендер компонентов тоже занимают время. Иногда прямое точечное изменение DOM быстрее, но в приложении с React оно может нарушить модель состояния.

На интервью безопасная формулировка такая: в React я обычно описываю UI через state и props, а прямой доступ к DOM оставляю для ref-сценариев. Например, поставить фокус, измерить размер элемента, подключить canvas, video API или стороннюю библиотеку.

Если вас спрашивают про DOM-дерево, отвечайте не только определением. Покажите, что вы понимаете последствия для frontend-разработки.

Хорошая структура ответа:

1. Дайте определение: объектное дерево документа в браузере.
2. Назовите узлы и связи: элементы, текст, document, родитель и потомки.
3. Скажите, что DOM доступен через API: поиск, изменение, события, создание и удаление узлов.
4. Отделите DOM от HTML, CSSOM, render tree и virtual DOM.
5. Добавьте практический риск: XSS через innerHTML, лишний layout, конфликт с React, ошибка из-за null при поиске элемента или неверное состояние доступности.

Так ответ звучит как рабочее понимание браузера, а не как заученное определение.