DOM и события

Что такое DOM

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

• document
  • html
    • head
    • body
      • header
      • main
        • ul
          • li«Яблоко»
          • li«Груша»

HTML — это исходный текст; DOM — живое состояние страницы. Если JS добавит <li>, он появится в DOM (и в DevTools → Elements), но не в «Просмотре кода».

Виды узлов

На практике работают почти только с элементами.

Выбор элементов

Изменение

el.textContent = 'Безопасный текст'    // ✓ текст, HTML не интерпретируется
el.innerHTML = '<b>HTML</b>'           // ⚠️ интерпретирует HTML — XSS с данными пользователя
el.classList.add('active')             // .remove / .toggle / .contains
el.dataset.id                          // читает data-id="..."
el.setAttribute('aria-expanded', 'true')
el.style.setProperty('--progress', '40%')
parent.append(child); el.remove()

textContent или innerHTML: первое — для текста (безопасно), второе — для доверенного HTML. Разница — в безопасности, см. XSS.

События

Событие — сигнал, что что-то произошло: клик, клавиша, отправка формы, прокрутка. Его слушают обработчиком (listener):

button.addEventListener('click', event => {
  console.log(event.target)       // элемент, по которому кликнули
})

Распространение: capture и всплытие

Клик по <li> принадлежит не только ему. Событие спускается от document до <li> (capture), затем поднимается обратно (всплытие) через ul, main, body… Его получает каждый обработчик по пути.

Делегирование событий

Благодаря всплытию можно поставить один обработчик на родителя вместо обработчика на каждом ребёнке:

list.addEventListener('click', e => {
  const item = e.target.closest('[data-id]')
  if (item) remove(item.dataset.id)
})

Работает и для элементов, добавленных позже, и расходует меньше памяти.

Формы

form.addEventListener('submit', e => {
  e.preventDefault()                                // без перезагрузки
  const data = Object.fromEntries(new FormData(e.currentTarget))
})

Связь с React

React строит и обновляет DOM за вас, декларативно: вы описываете, как должен выглядеть интерфейс, React вносит изменения. Но onClick, event.target, preventDefault, FormData, всплытие — это те же самые API. React даже использует делегирование событий в корне приложения.

Коротко

• DOM = живое дерево страницы, которое можно менять из JS.
• querySelector + closest; textContent для текста, innerHTML — только с доверенным HTML.
• События всплывают → делегирование с одним обработчиком на родителе.

Официальные источники

• MDN — Introduction to the DOM
• MDN — Introduction to events
• MDN — Event bubbling
• MDN — FormData