Зачем нужно DOM-дерево

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

Основные задачи DOM:

• Доступ к элементам (через querySelector, getElementById и т.д.)
• Изменение контента (innerHTML, textContent)
• Управление атрибутами (setAttribute, classList)
• Обработка событий (addEventListener)

Пример:

// Изменение текста кнопки
const button = document.querySelector('button');
button.textContent = 'Нажми меня';
button.addEventListener('click', () => {
  alert('DOM работает!');
});

Без DOM веб-страницы были бы статичными, а интерактивность — невозможной.