1.1 Основні концепції DOM
Документна об’єктна модель (DOM) — це програмний інтерфейс для веб-документів. Вона представляє структуру документа як дерево вузлів, де кожен вузол є частиною документа, такою як елемент, текст, коментар і так далі. Розуміння DOM та його вузлів є фундаментальним аспектом роботи з веб-технологіями.
Основні концепції DOM
Що таке DOM?
DOM (Document Object Model) представляє собою ієрархічну структуру, яка описує вміст HTML-документа. Він дозволяє програмам і скриптам динамічно отримувати доступ до вмісту документа та змінювати його структуру, стиль і зміст.
Вузли та елементи
У контексті DOM всі частини документа розглядаються як вузли (node). Вузли бувають кількох типів:
- Елементні вузли: представляють HTML-теги.
- Текстові вузли: представляють текст, що знаходиться всередині елементних вузлів.
- Вузли коментарів: представляють коментарі в HTML.
- Документні вузли: представляють сам документ.
Дерево вузлів
DOM представляє собою деревоподібну структуру, де кожен вузол може мати нащадків (дочірні вузли). Кореневим вузлом є об’єкт document, який представляє весь HTML-документ.
Приклад структури DOM:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h1>Привіт, світ!</h1>
<p>Це абзац.</p>
</body>
</html>
Для цього документа дерево DOM виглядатиме наступним чином:
document
└── html
├── head
│ └── title
│ └── #text: "Заголовок документа"
└── body
├── h1
│ └── #text: "Привіт, світ!"
└── p
└── #text: "Це абзац."
1.2 Типи вузлів
1. Елементні вузли
Елементні вузли відповідають HTML-тегам. Наприклад, вузол для тегу <body> називається елементним вузлом.
Приклад:
У цьому прикладі <body> і <h1> є елементними вузлами.
<body>
<h1>Привіт, світ!</h1>
</body>
2. Текстові вузли
Текстові вузли містять текст всередині елементних вузлів. Текстові вузли є нащадками елементних вузлів і містять рядкові дані.
Приклад:
У цьому прикладі текст "Привіт, світ!" є текстовим вузлом, нащадком вузла <h1>.
<h1>Привіт, світ!</h1>
3. Вузли коментарів
Вузли коментарів представляють собою коментарі в HTML, починаються з <!-- та закінчуються -->.
Приклад:
У цьому прикладі <!-- Це коментар --> є вузлом коментаря.
<!-- Це коментар -->
<p>Це абзац.</p>
4. Документні вузли
Документний вузол представляє собою кореневий вузол дерева DOM і є батьківським вузлом для всіх інших вузлів у документі.
Приклад:
Об’єкт document у JavaScript представляє собою документний вузол:
console.log(document);
1.3 Взаємодія з вузлами DOM
1. Отримання інформації про вузли
Властивості об’єкта вузла дозволяють отримати інформацію про конкретний вузол. Наприклад, можна дізнатися тип вузла, його ім’я та вміст.
Приклад:
<html>
<head>
<title>Мій вебсайт</title>
</head>
<body>
<h1>Привіт, світ!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Виведе: H1
console.log(heading.nodeType); // Виведе: 1 (Елементний вузол)
console.log(heading.textContent); // Виведе: "Привіт, світ!"
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ