Доведеться мені недотриматись своїх правил і закинути на блог переклад. Це потрібно, так як писати власноруч стільки інформації немає часу.

 DOM - Об'єктна модель документа або Document Object Model

Тут починається не мій текст:

Один з моїх читачів нещодавно запитав у мене, що ж таке DOM1. Він сказав, що чув згадки про DOM, але не впевнений, що в точності розуміє, що ж це таке.

Давайте у всьому розберемося.

DOM - це HTML, який я пишу? Ні. Не зовсім.

HTML-код, який ви пишете, аналізується і перетворюється браузером згодом в DOM.

«Перегляд коду сторінки» - це DOM? Ні. Не зовсім.

Функція «перегляду коду сторінки» всього лише показує HTML-код, що формує сторінку. Це практично той самий HTML-код, який ви написали в редакторі.

Цей код може виглядати дещо інакше, якщо, наприклад, ви працюєте з файлами шаблону в бекенд, і не дуже-то часто заглядаєте в HTML-код, одержуваний на виході. Або, якщо перед публікацією сторінки на сайті ваш HTML-код проходить через деякий «процес складання». Цей код може, наприклад, стискатися перед публікацією або змінюватися яким-небудь іншим способом.

В цілому, режим перегляду коду сторінки - трохи дивна штука. Насправді, цей код цікавий тільки розробникам, але в той же час, всі сучасні браузери вже мають вбудовані інструменти для розробників (DevTools і аналоги). Ймовірно, ця функція в сучасних браузерах віджила свою корисність.

А код в панелі розробника - це DOM? Загалом, так!

Якщо ви відкриєте панель інструментів розробника і побачите там щось на зразок HTML, то ви виявите, що насправді це - візуальне уявлення DOM. Ура, ми нарешті знайшли DOM!

Хммм. Але виглядає зовсім як мій HTML-код

Так, це дійсно так і є. Пам'ятайте, DOM формується з написаного вами HTML-коду. У самому спрощеному варіанті візуальне уявлення DOM буде виглядати точно так само, як ваш простий HTML-код.

Але, найчастіше, все зовсім не так.

Коли візуальне уявлення DOM відрізняється від HTML-коду?
Наприклад, якщо у вашому HTML-коді є помилки, і браузер виправив їх за вас. Припустимо, у вас є елемент <table>, і ви пропустили обов'язковий елемент <tbody>. Браузер просто додасть цей елемент <tbody> за вас. Він буде присутній в DOM, тому ви зможете знайти його за допомогою JavaScript, або стилізувати за допомогою CSS, навіть якщо його немає в написаному вами HTML-коді.

І тим не менше, найбільш ймовірна причина у відмінностях між написаним кодом і фактичним DOM в тому, що ...

JavaScript може динамічно змінювати DOM
Уявіть, що у вашому HTML-коді є порожній елемент, приблизно ось такий:

<div id = "container"> </ div>
А трохи нижче в коді є трошки JavaScript'а:

<script>
     var container = document.getElementById ("container");
     container.innerHTML = "Абра-кадабра!";
</ script>
Навіть якщо ви не знаєте JavaScript, ви можете зрозуміти сенс цього фрагмента коду. На екрані ви побачите Абра-кадабра !, тому що порожній div був заповнений новим вмістом.

Якщо ви відкриєте панель інструментів розробника, щоб подивитися на візуальне уявлення DOM, то побачите:

<div id = "container"> Абра-кадабра! </ div>
Це відрізняється від оригінального HTML-коду або від того, що ви побачите при перегляді вихідного коду сторінки.

Ajax і шаблонізаціі
Навіть не заглиблюючись у цю тему, я готовий стверджувати, що ви розумієте те, що DOM буде дуже сильно відрізнятися від оригінального HTML-коду при використанні AJAX для отримання контенту ззовні, і додавання його на сторінку. Аналогічна ситуація відбувається при завантаженні даних і використанні їх у клієнтській шаблонізаціі.

Спробуйте відкрити Gmail і подивитися вихідний код сторінки. Ви виявите купу скриптів і даних для первинного завантаження сторінки. Зовсім не схоже на інтерфейс, який ви бачите на екрані.

JavaScript vs. DOM
По суті, JavaScript - це мова, зрозуміла браузером, за допомогою якої в ньому робиться безліч операцій. Всі вони відбуваються саме всередині DOM. Велика частина того, що ви б назвали операціями JavaScript, насправді є частиною DOM API.

Наприклад, ми можемо написати код на JavaScript, який стежитиме за спрацьовуванням події mouseenter на елементі. Цей елемент є ні що інше, як вузол DOM-дерева, і до цього вузла ми за допомогою DOM-властивостей підключаємо обробник. Спрацювання події відбувається тому, що вузол DOM-дерева поширює його.

Їхав DOM через DOM

Я прощу вибачення, якщо сформулював щось не зовсім чітко. Але, я сподіваюся, ви все зрозуміли. DOM - це те, що пов'язує все воєдино, саме всередині DOM все і відбувається. JavaScript - це просто синтаксис, мови. Він може бути використаний і поза браузером, де DOM API немає і в помині. Наприклад, зверніть вашу увагу на платформу Node.js.

Ця стаття занадто поверхнева і недостатньо заумна для мене
Так, DOM - це «об'єктна модель документа», і все в такому дусі. Я не хотів, та й чесно кажучи, недостатньо компетентний, щоб писати такі статті.
 «Об'єктна модель документа»