Что такое DOM?

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

Что такое DOM

Браузер парсит HTML и строит дерево объектов, где каждый тег, атрибут и текст — узел (node). DOM — это API браузера (не часть языка JS), доступный через глобальный document.

Типы узлов

• Element — теги (<div>, <p>).
• Text — текст внутри элементов.
• Attribute — атрибуты.
• Comment — комментарии.

Основные операции

// Поиск
const el = document.querySelector('.card');
const list = document.querySelectorAll('li');

// Изменение
el.textContent = 'Новый текст';
el.classList.add('active');
el.setAttribute('data-id', '5');

// Создание и вставка
const div = document.createElement('div');
document.body.append(div);

// События
el.addEventListener('click', () => {});

Почему важна производительность

Операции с DOM дороги (могут вызвать reflow/repaint). Поэтому изменения группируют, используют DocumentFragment, а фреймворки применяют Virtual DOM для минимизации прямых обращений.

Коротко для собеседования

DOM — древовидное объектное представление страницы и API браузера для работы с ней (document). Позволяет искать, менять и создавать элементы, вешать события. Прямые операции дороги, поэтому их оптимизируют.