Работа с DOM
Тема дорожной карты · Frontend разработчик
JavaScript DOM API (Document Object Model) — это программный интерфейс, представляющий HTML5-документ как живое дерево объектов-узлов, позволяющий JavaScript-коду читать и изменять структуру, содержимое и стили веб-страницы в реальном времени. Основные методы DOM API: document.querySelector() и document.querySelectorAll() для выбора элементов, element.innerHTML, element.textContent и element.setAttribute() для работы с содержимым, а также element.classList.add(), element.classList.remove() и element.classList.toggle() для динамического управления CSS-классами. DOM API инициирует события (click, input, submit, keydown), которые JavaScript обрабатывает через addEventListener(), обеспечивая интерактивный интерфейс без полной перезагрузки страницы. Хотя современные React- и Vue-приложения используют виртуальный DOM для пакетной оптимизации обновлений реального DOM API, каждый frontend-разработчик должен понимать базовый DOM API напрямую — именно на нём строятся все JavaScript UI-фреймворки, и именно его инспектируют DevTools браузера и Lighthouse при аудите доступности и производительности.
Как это работает
Работа с DOM — однопоточный event-driven язык с first-class функциями, прототипным наследованием и динамической типизацией. Переменные: let, const (block-scope), избегайте var. Типы: number, string, boolean, null, undefined, symbol, bigint, object. Равенство: === (строгое) лучше == (коэрсит). Поток: if/else, for/for...of/for...in, while, switch. Асинхронность: callback → promise → async/await. DOM API (document, Element, Event) для чтения + изменения страницы.
Когда применять
Освойте ванильный JS до фреймворка — каждый React/Vue/Svelte баг в итоге оказывается JS-багом. const по умолчанию, let только при реассайне. async/await лучше сырых promise-цепочек. Array.map/filter/reduce лучше ручных циклов, когда intent ясен. Линтинг — ESLint + разумный config (Standard, Airbnb, recommended). Современные фичи (optional chaining ?., nullish coalescing ??).
Типичные ошибки
Ловушки Работа с DOM: путаница this в callback (arrow-функции наследуют this; обычные создают своё); баги == (0 == "" истина); мутация массива, когда хотели копию (arr.sort() мутирует — используйте [...arr].sort()); забытый await и работа с Promise (не получаете значение); console.log объекта показывает живое состояние (меняется после лога). Используйте TypeScript, чтобы ловить это на сборке.