obsidian/Веб/Фронтенд/DOM.md

• Document Object Model
• Это платформо-независимый интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-документов
• Стандартизована W3C (World Wide Web Consortium)
• Документ в DOM представляет собой дерево узлов
• Узлы связаны между собой отношением родитель-потомок
• Используется для динамического изменения страниц HTML
• Генерируется браузером, браузер получил html с сервера и строит по нему дерево в ОЗУ. JS скрипты меняют содержимое DOM в оперативке (именно поэтому при нажатии F5 все сбрасывается)
• Также браузер может менять и CSS-стили - для них создается CSSOM (CSS Object Model) - F12 и просмотр кода элемента ровно это и делают
• Точка входа - объект document (на самом деле window.document)

Манипуляции через JavaScript

• получение узлов: document.all("image1").outerHTML;
• изменение узлов
• изменение связей между узлами
• удаление узлов

Иерархия объектов DOM под капотом

1. EventTarget - базовый класс, дающий возможность вешать события addEventListener
2. Node - узел дерева, узлами бывают не только теги, но и просто куски текста или комментарии
3. Element - узел-тег, у которого есть атрибуты
4. HTMLElement - базовый класс для HTML-тегов
5. Конкретные классы: HTMLInputElement, HTMLButtonEvent

API для изменения

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

• Современный стандарт document.querySelector('.class #id') - ищет первый попавшийся по CSS-селектору
• document.querySelectorAll - возвращает коллекцию NodeList
• getElementById, getElementsByClassName - быстрее, но синтаксис хуже - легаси

Изменение содержимого и стилей

• element.textContent = "Текст" - вставляет текст
• element.innerHTML = "<b>Текст</b>" - вставляет HTML
• element.style.backgroundColor = "red" - инлайн-стили
• element.classList.add("active") - добавить CSS-класс

Создание и удаление

const btn = document.createElement('button'); // Создали объект в памяти (он еще не на экране!)
btn.textContent = "Нажми меня";
document.body.append(btn); // Физически вставили в DOM (на экран)
btn.remove(); // Удалили

Reflow и Repaint

1. Reflow (Перекомпоновка): Происходит, если JS меняет геометрию (ширину, высоту, добавляет/удаляет элемент). Браузеру приходится заново пересчитывать Layout для всего дерева. Это очень медленно и грузит процессор.
2. Repaint (Перерисовка): Происходит, если JS меняет только внешний вид (цвет фона, цвет текста). Браузер просто перекрашивает пиксели. Это быстро.

[!note] Индустрия Именно из-за проблемы медленного Reflow при прямых манипуляциях с DOM, Facebook в 2013 году придумал React и концепцию Virtual DOM. React собирает все изменения в "виртуальном" черновом дереве в ОЗУ, сравнивает их, и вносит в реальный DOM только одну математически идеальную минимальную правку, чтобы не вызывать лишних Reflow.

События и всплытие

• Подключение element.addEventListener("click", (event) => {...}). Объект event хранит всю информацию о нажатии