Как взаимодействуют JS, браузер и DOM

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

Взаимодействие:

1. Браузер парсит HTML и строит DOM.
2. JS может читать и изменять DOM через методы (document.getElementById(), element.innerHTML и т.д.).
3. Изменения DOM приводят к перерисовке страницы (reflow и repaint).

Пример:

// Получаем элемент
const button = document.querySelector('button');
// Добавляем обработчик события
button.addEventListener('click', () => {
  // Меняем DOM
  document.body.style.backgroundColor = 'red';
});

Важно: частые изменения DOM могут снижать производительность. Оптимально использовать batch-обновления (например, через DocumentFragment).