Что такое DOM?

Что такое DOM?

У многих начинающих верстальщиков и Javascript программистов смутное представление что такое DOM. На css-tricks нашел замечательную статью про это.<!--more-->

Что такое DOM?

Однако написанный вами HTML парсится браузером и превращается в DOM.

Исходный код

При просмотре исходного кода вы просто видите HTML страницы. Там может быть такой же HTML, который вы написали.

Код может быть другим если, например, вы работаете над файлом шаблонов на бэкенд языке и не часто просматриваете компилированный HTML.

Вообще-то немного странно, что до сих пор просмотр исходного кода существует в браузерах. Во всех основных браузерах уже есть инструменты для разработчиков.

dev tools

Когда вы просматриваете в любом инструменте разработчиков (DevTools) код, он выглядит как HTML, но на самом деле он является визуальным представлением DOM!

![Но это выглядит как HTML] (/public/images/2014/01/st/CyHxUa5Hu888vWt.png "Но это выглядит как HTML")

Ну что же, да, он выглядит. Он был создан как раз с вашего HTML, если помните. Во многих случаях, визуальное представление DOM будет выглядеть как простой HTML.

Но часто это не так...

В каких случая DOM будет выглядеть иначе, чем HTML?

Есть несколько случаев: вы совершили ошибку при верстке в HTML и браузер исправил его за вас. Скажем вы написали &table& в вашем HTML и забыли написать &tbody&. Браузер просто напросто вставит требуемый &tbody& за вас. Этот элемент будет присутствовать в DOM, так что вы сможете его найти через JavaScript или стилизовать его через CSS, даже если его нет в вашем HTML.

Но самый частый случай это...

JavaScript может манипулировать DOM-ом

Представьте, что вы имеете пустой элемент в HTML:

<div id="container"></div>

А чуть позже вы добавили в HTML немного JavaScript-а:

<script>
    var container = document.getElementById("container");
    container.innerHTML = "New Content!";
</script>

Даже если не знаете JavaScript, вы можете понять что сделает этот код. На экране вы увидите New Content! Все потому, что пустой &div& JavaScript заполнил контентом.

Если проверите через DevTools, то сможете увидеть в представлении DOM следующее:

<div id="container">New Content!</div>

Ajax и шаблонизация

Давайте не будет углубляться здесь. Но если вы используете Ajax, чтобы получить контент с другого места и вставить его в страницу, то конечно же DOM будет выглядеть совершенно другим нежели ваш оригинальный HTML.

Зайдите на Gmail и просмотрите исходный код. Вы сразу поймете о чем я.

JavaScript и DOM

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