🌳 DOM -- Document Object Model

Map of Content для работы с DOM: поиск элементов, манипуляция, события, делегирование и динамический UI.

---

📑 Оглавление

• Зачем нужно
• Путь обучения
• Связанные домены
• Навигация

---

Зачем нужно

DOM -- это мост между JavaScript и HTML-страницей. Через DOM можно читать, изменять, создавать и удалять любые элементы интерфейса. Понимание DOM необходимо для работы с любым фреймворком, потому что все фреймворки -- это абстракции над DOM.

↑ к оглавлению

---

🗺 Путь обучения

🟢 Начинающий

Концепции

• DOM дерево
• DOM-дерево -- узлы и типы узлов
• document и window
• DOM vs HTML -- в чём разница

Поиск элементов

• Поиск элементов
• querySelectorAll и NodeList
• getElementById, getElementsByClassName
• closest -- поиск родителя

Свойства элементов

• textContent, innerHTML, innerText
• Атрибуты -- getAttribute, setAttribute
• data-атрибуты (dataset)
• classList -- add, remove, toggle, contains
• style -- инлайн-стили через JS

🟡 Средний

Создание и модификация

• Манипуляция DOM
• createElement и createTextNode
• append, prepend, before, after
• cloneNode -- клонирование
• insertAdjacentHTML
• DocumentFragment -- оптимизация

События

• События
• Всплытие и погружение
• Всплытие и погружение
• Делегирование событий
• preventDefault и stopPropagation
• Пользовательские события -- CustomEvent

Типы событий

• События мыши -- click, mouseover, mouseenter
• События клавиатуры -- keydown, keyup
• События формы -- submit, input, change
• События фокуса -- focus, blur
• Событие scroll
• События загрузки -- DOMContentLoaded, load

Навигация по DOM

• parentElement, children, siblings
• firstChild, lastChild, nextSibling
• Разница между childNodes и children

🔴 Продвинутый

Продвинутые API

• MutationObserver -- наблюдение за DOM
• IntersectionObserver
• ResizeObserver -- изменение размера
• getBoundingClientRect -- размеры и позиция

Производительность DOM

• Browser rendering flow
• Virtual DOM
• Batch DOM updates
• Browser rendering flow
• Debounce и Throttle для DOM-событий

Формы и валидация

• Работа с формами через JS
• FormData API
• Кастомная валидация форм
• Constraint Validation API

Drag and Drop

• Drag and Drop API
• Кастомный Drag and Drop

↑ к оглавлению

---

🔗 Связанные домены

Домен	Связь
_MOC JavaScript	Родительский домен
_MOC HTML	HTML-структура для DOM
_MOC CSS	Стили через DOM
_MOC Асинхронность	Асинхронные события
_MOC Производительность	Оптимизация DOM-операций
_MOC SPA	Фреймворки и Virtual DOM
_MOC Рецепты	Готовые UI-решения на DOM

↑ к оглавлению

---

🧭 Навигация

⬆ Родительский MOC	_MOC JavaScript
⬆ К главной	🗺️ MOC

📑 Быстрое оглавление

• Зачем нужно
• Путь обучения
• Связанные домены