Почему DOM и HTML разделены между собой

DOM (Document Object Model) — это программное представление HTML/XML документа в виде дерева объектов, которое можно изменять через JavaScript. HTML — это язык разметки, описывающий структуру страницы.

Разделение нужно, потому что:

1. HTML статичен — это исходный код страницы, который браузер парсит.
2. DOM динамичен — это живое представление документа, которое обновляется при изменениях (например, через document.createElement()).

Пример:

<!-- HTML -->
<div id="root"></div>

// DOM-манипуляции
const root = document.getElementById('root');
root.textContent = 'Hello DOM!'; // Изменяем DOM, но HTML остаётся прежним

Такой подход позволяет изменять страницу без перезагрузки, что критично для SPA.