DOM-дерево

Браузер читает HTML и создаёт дерево объектов — DOM-дерево. Каждый HTML-тег становится элементом (Element). Текст внутри тега — текстовый узел (Text). Комментарии — узел комментария (Comment). Все они связаны: родитель → ребёнок → сосед.

Что такое DOM?

DOM (Document Object Model) — это дерево объектов, которое браузер создаёт из HTML-кода. JavaScript работает именно с этим деревом, а не с исходным текстом HTML.

Как HTML превращается в DOM:

• Браузер скачивает HTML-файл (текст)
• Парсер читает теги и создаёт объекты
• Каждый тег → Element (элемент)
• Текст внутри тега → Text (текстовый узел)
• Комментарии → Comment
• Все объекты связываются в дерево

Пример: HTML: <div><p>Привет</p></div>

DOM: document └─ html ├─ head └─ body └─ div └─ p └─ Text: "Привет"

Типы узлов:

• Element (<div>, <p>, <span>)
• Text (текст внутри тегов)
• Document (корень дерева — document)
• Comment (<!-- комментарий -->)

Связи:

• parent → child (div → p)
• sibling (два элемента с одним родителем)
• ancestor → descendant (html → p)

Важно: DOM ≠ HTML!

• HTML — это исходный текст
• DOM — это дерево объектов в памяти браузера
• JavaScript изменяет DOM, а не HTML-файл
• При обновлении страницы DOM пересоздаётся из HTML

DOM-дерево — как генеалогическое древо семьи. document — прадед. html — дед. body — отец. div — дети. p — внуки. Текст — домочадцы внутри дома. Каждый знает своего родителя и детей.

**Самый простой:**

// HTML:
// <div id="app">
//   <p>Привет</p>
//   <p>Мир</p>
// </div>

const app = document.getElementById('app');
console.log(app.children); // HTMLCollection [p, p]
console.log(app.children[0].textContent); // 'Привет'

DOM-дерево доступно через JavaScript. children — прямые потомки.

**Простой:**

// Посмотрите на DOM-дерево через DevTools:
// Откройте F12 → вкладка Elements
// Вы увидите дерево тегов

// В JavaScript:
const body = document.body;
console.log(body.childNodes); // NodeList (включает текстовые узлы!)
console.log(body.children);   // HTMLCollection (только элементы!)

childNodes включает текстовые узлы (пробелы, переносы). children — только элементы.

**Реальный пример:**

// Разница между DOM и исходным HTML:
// Исходный HTML:
// <div id="app">  <p>Привет</p>  </div>

// Браузер может «починить» невалидный HTML:
// <p>Привет<p>Мир → браузер закроет тег: <p>Привет</p><p>Мир</p>

const div = document.getElementById('app');
console.log(div.innerHTML); // Строка HTML
console.log(div.outerHTML); // '<div id="app">...'

innerHTML — это текущее состояние DOM, а не исходный HTML.

**Неправильно:** Думать, что DOM = HTML

**Почему:** HTML — текстовый файл. DOM — дерево объектов в памяти. JavaScript работает с DOM.

**Правильно:** HTML → парсер → DOM. JavaScript изменяет DOM, а не HTML-файл.

**Неправильно:** Путать childNodes и children

**Почему:** childNodes включает текстовые узлы (пробелы!). children — только элементы.

**Правильно:** Для элементов используйте children. childNodes — только если нужны текстовые узлы.

**Неправильно:** Думать, что DOM обновляется мгновенно

**Почему:** Изменения DOM вызывают reflow/repaint — это может быть медленным.

**Правильно:** Пакетные обновления быстрее, чем по одному элементу.

• DOM — дерево объектов, созданное из HTML
• Element, Text, Comment, Document — типы узлов
• parent/child/sibling — связи между узлами
• childNodes включает текстовые узлы, children — только элементы
• JavaScript изменяет DOM, а не исходный HTML

Назад: Вы знаете браузерное окружение (D1) — теперь вы понимаете, чем на самом деле является document.

Вперёд: Следующий урок (D3) учит перемещаться по дереву: искать элементы по селекторам и проходить по связям между узлами.