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