Как мы работаем c DOM

Работа с DOM включает манипуляции с элементами страницы: создание, изменение, удаление и обработка событий.

Основные методы:

• document.getElementById() / querySelector() – поиск элементов
• createElement() / appendChild() – создание и добавление элементов
• classList.add() / classList.remove() – управление классами
• addEventListener() – обработка событий

Пример:

const button = document.querySelector('button');
button.addEventListener('click', () => {
  const div = document.createElement('div');
  div.textContent = 'Новый элемент';
  document.body.appendChild(div);
});

Оптимизация:

• Используйте делегирование событий (event.target.closest()).
• Минимизируйте рефлоу/репайнт (например, через DocumentFragment).
• Для сложных SPA – виртуальный DOM (React, Vue).

DOM-операции дорогие, поэтому важно работать с ними эффективно.