1. Коли візуальне уявлення DOM відрізняється від HTML-коду?
2. JavaScript може динамічно змінювати DOM
3. Ajax і шаблонізаціі
4. JavaScript vs. DOM
5. Ця стаття занадто поверхнева і недостатньо заумна для мене
6. Примітка

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

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

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

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

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

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

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

Так, це дійсно так і є. Пам'ятайте, 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 все і відбувається. JavaScript - це просто синтаксис, мова. Він може бути використаний і поза браузера, де DOM API немає і в помині. Наприклад, зверніть вашу увагу на платформу Node.js.

Ця стаття занадто поверхнева і недостатньо заумна для мене

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

Примітка

1. Тут і далі по тексту, для стислості ми будемо використовувати термін DOM замість аналогічного, але менш поширеного російськомовного терміна «Об'єктна модель документа», прим. редакції FM.