Для чего нужен DOM

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

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

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

Пример:

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

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

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