При відкритті будь-якого HTML документа браузер попередньо розбирає його вміст і на основі цього аналізу створює об'єктну модель HTML документаабо коротше DOM.
DOM складається з вкладених один в одного ієрархічно розташованих об'єктів, які називаються вузлами. Кожен вузол у структурі представляє розміщений на сторінці HTML елемент.
Використовуючи DOM Ви можете взаємодіяти ( зчитувати, змінювати, видаляти) З вмістом HTML документів зі скриптів.
Нижче розташовується код HTML документа і DOM, яка була створена браузером на основі цього коду:
HTML DOM
HTML DOM.
Привіт всім.
Всі прямокутники, зображені на картинці, є об'єктами (або вузлами). Різним кольором на зображення відзначені різні вузли типу.
Червоним кольором відзначено вузол Document. Будь-яке звернення до DOM має починатися з звернення до цього сайту.
Зеленим кольором відзначено елементні вузли. Для кожного HTML елемента на сторінці веб-переглядач створює відповідний елементний вузол.
Вміст елементів зберігається в текстових вузлах. Текстові вузли відзначені на нашій схемі синього кольору.
Для кожного атрибуту HTML елемент створюється атрибутний вузол. Атрибутний вузол відзначений схемою рожевим кольором.
Зверніть увагу:не забувайте, що текст завжди зберігається в текстових вузлах, а не властивість елемента. Тобто. Для того, щоб звернутися до вмісту HTML елементу, Ви повинні звернутися до властивості його текстового вузла.
Відносини між вузлами
Вузли в об'єктній структурі пов'язані один з одним. Існує кілька спеціальних термінів для опису відносин між вузлами:
Батьківський вузол ( parent node)
- Батьківським вузлом по відношенню до об'єкта, що розглядається, є вузол, в який вкладений аналізований об'єкт. На нашій схемі щодо вузлів
і
є батьківським. Для вузла
батьківським є вузол <head>.</p>
<p><b>Вузли-нащадки ( <i>child node</i>)
</b>- вузлом-нащадком по відношенню до об'єкта, що розглядається, є вузол, який вкладений в аналізований об'єкт. На нашій схемі щодо вузла <body> <h1>і <p>Є нащадками. Для вузла <head>нащадком є <title>.</p>
<p><b>Вузли-брати ( <i>sibling node</i>)
</b>- вузли що на рівні рівні вкладеності стосовно їх батьківському вузлу. На нашій схемі вузлами-братами є <body>і <head>, <p>Найвищий вузол у DOM називається <b>кореневим</b>. На нашій схемі кореневим є <html>(т.к. об'єкт document не є частиною DOM).</p>
<p>Модель DOM часто називають деревом DOM, оскільки вона складається з дерева об'єктів, які називаються вузлами. Ви дізналися, що таке Document Object Model (DOM), як отримати доступ до об'єкта document і змінити його властивості за допомогою консолі, також ми різницю між вихідним кодом HTML і DOM.</p>
<p>У цьому мануалі ви знайдете термінологію HTML, яка необхідна для роботи з JavaScript та DOM, дізнаєтесь, що таке дерево та вузли DOM, та навчитеся визначати найпоширеніші типи вузлів. Також ви зможете створити програму JavaScript у консолі для інтерактивної зміни DOM.</p>
<h2>Термінологія HTML</h2>
<p>Розуміння термінів HTML і JavaScript є критично необхідним для роботи з DOM. Давайте коротко розглянемо основні терміни.</p>
<p>Подивіться цей елемент HTML:</p>
<p>Home</p>
<p>У ньому є анкор, який є посиланням на index.html.</p>
<ul><li>a – тег</li>
<li>href – атрибут</li>
<li>html – значення атрибуту</li>
<li>Home – текст.</li>
</ul><p>Все, що знаходиться між тегами, що відкривається і закривається, становить HTML-елемент.</p>
<p>Повернемося до файлу index.html з попереднього мануалу:</p>
<p><!DOCTYPE html><br>
<html lang="en"><br>
<head><br>
<title>Learning the DOM
Document Object Model
