Зачем нужен DOM

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

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

• Изменение структуры HTML (добавление, удаление, изменение элементов)
• Обновление содержимого страницы
• Реакция на события (клики, ввод и т.д.)
• Работа с атрибутами и классами элементов

Пример:

// Находим элемент
const button = document.querySelector('#myButton');

// Добавляем обработчик события
button.addEventListener('click', () => {
  // Меняем текст и стиль
  button.textContent = 'Clicked!';
  button.style.backgroundColor = 'red';
});

Без DOM веб-страницы были бы статичными, без возможности динамического обновления.