Пошук уроків, статей та іншого контенту
Document Object Model — представлення HTML-сторінки у вигляді дерева об'єктів, з яким працює JavaScript.
Коли браузер завантажує HTML, він не залишає його як простий текст — він розбирає розмітку й будує з неї структуру в пам'яті у вигляді дерева об'єктів. Ця структура називається DOM (Document Object Model), і саме з нею, а не з вихідним HTML-файлом, працює JavaScript. Зміни в DOM одразу відображаються на екрані — це і є механізм, що робить сторінки інтерактивними.
DOM відображає вкладеність HTML-тегів як батьківсько-дочірні зв'язки:
<body>
<header>
<h1>Заголовок</h1>
</header>
<main>
<p>Текст</p>
</main>
</body>У DOM це стає деревом: body — батько header і main, h1 — дочірній елемент header і так далі. Кожен вузол дерева — окремий об'єкт із власними властивостями й методами.
Глобальний об'єкт document представляє всю сторінку й слугує відправною точкою для будь-якої взаємодії з DOM — пошуку елементів, створення нових, обробки подій:
console.log(document.title); // заголовок вкладки браузера
console.log(document.body); // об'єкт <body>
console.log(document.documentElement); // об'єкт <html>Якщо JavaScript додав новий елемент чи змінив текст після завантаження, «Переглянути код сторінки» (View Page Source) у браузері все одно покаже оригінальний HTML з сервера — а DevTools → Elements покаже актуальний, живий DOM з усіма змінами. Це джерело поширеної плутанини серед новачків.
Тому для дебагу DOM-маніпуляцій завжди використовуйте вкладку Elements у DevTools (з модуля про інструменти розробника), а не «переглянути код сторінки».
Усе, що робить сторінку динамічною без перезавантаження — розкривне меню, валідація форми в реальному часі, підвантаження нових повідомлень у чаті — це маніпуляція DOM у відповідь на дії користувача. Наступні уроки цього модуля — це саме про те, як знаходити потрібні елементи дерева, змінювати їх і реагувати на події.
Плутанина DOM із вихідним HTML-кодом — DOM живий і змінюється, HTML-файл на сервері незмінний.
Спроба працювати з DOM до того, як сторінка повністю завантажилась (детальніше про це — у модулі «Вступ до JavaScript», урок про defer/async).
DOM — це дерево об'єктів, яке браузер будує з HTML і з яким взаємодіє JavaScript. Зміни в DOM миттєво відображаються на екрані. document — глобальна точка входу до цього дерева. Наступні уроки покажуть, як шукати, змінювати елементи та реагувати на дії користувача через події.
Спробуйте самостійно
Відкрийте будь-яку сторінку, натисніть F12 → вкладка Elements, і в консолі виконайте document.body.style.backgroundColor = "lightblue". Переконайтесь, що сторінка змінилась, а «переглянути код сторінки» цієї зміни не покаже.