DOM (Document Object Model) — это API для HTML и XML документов. Представляет собой дерево узлов, где каждый узел соответствует элементу, атрибуту или текстовому фрагменту документа. Используется для доступа и манипулирования структурой, стилями и содержимым веб-страниц. Прямые манипуляции с DOM могут быть медленными из-за необходимости пересчета стилей, макета и перерисовки.
Virtual DOM — это концепция, используемая во фреймворках типа React или Vue. Это представление дерева DOM, которое хранится в памяти. Когда данные компонента изменяются, фреймворк создает новое виртуальное DOM-дерево. Затем сравнивает его с предыдущим виртуальным деревом (диффинг) и определяет минимальный набор изменений, которые нужно применить к реальному DOM. Это позволяет оптимизировать обновление страницы, минимизируя дорогие операции с реальным DOM.
Shadow DOM — это веб-стандарт, позволяющий инкапсулировать структуру, стили и поведение компонента. Создает скрытое "теневое" дерево DOM, присоединенное к элементу в обычном DOM (хост-элемент). Содержимое Shadow DOM изолировано от остального документа: стили внутри него не влияют на внешний мир, и наоборот. Это полезно для создания переиспользуемых изолированных компонентов, например, <video> или <input type="range">.
Основные отличия:
| Характеристика | Обычный DOM | Virtual DOM | Shadow DOM |
|---|---|---|---|
| Представление | Реальное дерево документа API | Легковесное представление DOM в памяти | Инкапсулированное поддерево DOM |
| Назначение | API для доступа и изменения документа | Оптимизация обновлений DOM | Инкапсуляция компонентов |
| Манипуляции | Прямые | Непрямые (через сравнение версий) | Прямые, но только внутри "тени" |
| Изоляция стилей | Нет | Нет (если не использовать CSS-in-JS или модули) | Есть |
| Стандарт | Часть веб-платформы | Концепция фреймворков | Часть веб-платформы |