- Document Object Model
- Это платформо-независимый интерфейс, позволяющий программам и скриптам получить доступ к содержимому [HTML](HTML.md)-документов
- Стандартизована W3C (World Wide Web Consortium)
- Документ в DOM представляет собой *дерево узлов*
- Узлы связаны между собой отношением родитель-потомок
- Используется для динамического изменения страниц HTML
- Генерируется браузером, браузер получил html с сервера и строит по нему дерево в ОЗУ. [JS](JavaScript.md) скрипты меняют содержимое DOM в оперативке (именно поэтому при нажатии F5 все сбрасывается)
- Также браузер может менять и [CSS](CSS.md)-стили - для них создается 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-класс
#### Создание и удаление
```JavaScript
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` хранит всю информацию о нажатии