Что получается при построении DOM-дерева на основе HTML

При построении DOM-дерева браузер преобразует HTML-разметку в иерархическую древовидную структуру объектов (узлов), где каждый HTML-элемент, атрибут и текстовый фрагмент становятся отдельными узлами. Основные типы узлов:

1. Document - корневой узел
2. Element nodes - теги HTML (<div>, <p> и т.д.)
3. Text nodes - текстовое содержимое
4. Attribute nodes - атрибуты элементов
5. Comment nodes - HTML-комментарии

Пример:

<div id="main">
  <!-- Комментарий -->
  <p>Привет, мир!</p>
</div>

Преобразуется в DOM:

Document
└── html
    └── body
        └── div#main
            ├── <!-- Комментарий -->
            └── p
                └── "Привет, мир!"

DOM-дерево сохраняет все отношения родитель-потомок из HTML и позволяет манипулировать элементами через JavaScript API.