Чем DOM отличается от HTML?

Что такое HTML и DOM?

HTML (HyperText Markup Language) — это язык разметки, который описывает структуру веб-страницы в виде текста с тегами. Когда браузер загружает HTML-файл, он парсит его и строит DOM (Document Object Model) — объектное представление документа в памяти. DOM — это древовидная структура, где каждый HTML-тег становится узлом (node), а текст внутри тегов — текстовыми узлами.

Ключевые отличия

• Статичность vs Динамичность: HTML — статичен, это просто текст. DOM — динамичен, его можно изменять через JavaScript (добавлять, удалять, изменять узлы).
• Представление: HTML — это строка. DOM — это объектная модель, с которой можно взаимодействовать программно.
• Влияние на страницу: Изменения в DOM сразу отображаются на странице (браузер перерисовывает её). Изменения в HTML-файле требуют перезагрузки страницы.

Пример

Представьте, что у вас есть HTML:

<div id="app">Привет</div>

После парсинга браузер создаёт DOM-узел для <div> и текстовый узел "Привет". С помощью JavaScript вы можете изменить текст:

const div = document.getElementById('app');
div.textContent = 'Мир';

Теперь DOM изменился, и на странице отображается "Мир", но исходный HTML-файл остался прежним.

Вывод

DOM — это мост между статическим HTML и динамическим JavaScript. Понимание этой разницы необходимо для работы с интерактивными веб-страницами, где требуется изменять содержимое без перезагрузки.