Хорошо, DOM - это внутреннее представление веб-страницы в браузере. Вот представление части DOM, указывающей на теги head и body:
![enter image description here](https://i.stack.imgur.com/n01Hb.png)
И вот представление части DOM, показывающей тег заголовка, содержащий тег заголовка с его значением:
![enter image description here](https://i.stack.imgur.com/FOhVC.png)
И вот представление части DOM, показывающее тег body, содержащий ссылку, со значением и атрибут href со своим значением:
![enter image description here](https://i.stack.imgur.com/adbRH.png)
Когда браузер получает HTML-код с сервера, появляется анализатор, который анализирует структуру кода и создает его модель. На основе этой модели браузер отображает страницу на экране.
Браузеры предоставляют API, который вы можете использовать для взаимодействия с DOM. Вот как работают современные JavaScript-фреймворки: они используют DOM API, чтобы сообщать браузеру, что отображать на странице.
Подробнее: https://flaviocopes.com/dom/