Урок 12

Итоги курса

Курс о DOM и событиях в JavaScript.

Что ты узнал

  • Что такое DOM — дерево объектов документа
  • Поиск элементов — querySelector, getElementById
  • Изменение DOM — создание, добавление, удаление
  • События — addEventListener, опции, делегирование
  • Всплытие и погружение — фазы, stopPropagation, preventDefault
  • Формы — FormData, валидация, события
  • Клавиатура и мышь — keydown, click, координаты
  • Работа с элементами — размеры, скролл, видимость
  • Анимации — переходы, requestAnimationFrame, Web Animations API
  • Практика — модалки, табы, формы, загрузка файлов

Ключевые идеи

DOM — дерево. Всё — узлы: элементы, текст, комментарии.

Делегирование — главный приём. Один обработчик на родителе вместо многих на детях.

События всплывают. Понимай фазы и используй stopPropagation осознанно.

textContent безопаснее innerHTML. Всегда экранируй пользовательские данные.

DocumentFragment для массовых вставок. Один reflow вместо сотни.

Анимируй transform и opacity. Не вызывает reflow.

IntersectionObserver для видимости. Ленивая загрузка, бесконечный скролл.

Частые ошибки

  • Использовать innerHTML с пользовательскими данными
  • Забыть preventDefault в форме
  • Не удалять обработчики при удалении элементов
  • querySelector в цикле вместо кеша
  • Путать target и currentTarget
  • Анимировать left, top, width
  • Забыть passive: true на скролле
  • Использовать onclick вместо addEventListener

Что дальше

  • React/Vue — декларативный UI вместо императивного DOM
  • Web Components — свои HTML-элементы
  • Shadow DOM — изоляция стилей
  • MutationObserver — реакция на изменения DOM
  • ResizeObserver — отслеживание размеров

Полезные ссылки

  • MDN DOM: developer.mozilla.org/ru/docs/Web/API/Document_Object_Model
  • MDN Events: developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Events
  • javascript.info/dom-nodes
  • You Don't Know JS: Scope & Closures

Заключение

DOM и события — основа интерактивности в браузере. Даже если ты работаешь с React или Vue, понимание того, что происходит под капотом, отличает сильного разработчика от новичка. Фреймворки абстрагируют DOM, но не заменяют понимание. Правила: делегирование, безопасность, производительность.