Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке дерево DOM?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**DOM (Document Object Model)** - це **об'єктна модель HTML-документа**,
тобто **структура веб-сторінки у вигляді дерева об'єктів**, з якою може працювати JavaScript.

---

### Приклад:

Ось простий HTML:

```javascript
<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>
```

Коли браузер завантажує цю сторінку, він **перетворює HTML на DOM-дерево**:

```javascript
Document
└── html
    └── body
        ├── h1
        │   └── "Hello"
        └── p
            └── "World"
```

> Тобто DOM - це **внутрішнє представлення HTML-сторінки в пам'яті браузера**,
> де кожен тег - це **об'єкт**, а вкладеність тегів - **ієрархія (дерево)**.

---

## Чим **DOM відрізняється від HTML**

| Відмінність | **HTML** | **DOM** |
|---|---|---|
| Що це | Текстовий код (розмітка) | Об'єктна модель документа |
| Де існує | У файлі (`.html`) | У пам'яті браузера |
| Формат | Рядки (теги, атрибути) | Об'єкти (вузли, властивості, методи) |
| Змінюється JS | Ні (HTML - статичний файл) | Так, DOM можна змінювати динамічно |
| Приклад | `<p>Hello</p>` | `document.querySelector('p').textContent = 'Hi'` |

Іншими словами:

- **HTML** - це **вихідний код сторінки**.
- **DOM** - це **жива структура**, з якою працює браузер і JavaScript.

---

## Типи вузлів у DOM

Кожен елемент DOM-дерева - це **вузол (node)**.
Існує кілька типів вузлів:

| Тип вузла | Приклад | Опис |
|---|---|---|
| `Document` | `document` | Корінь дерева |
| `Element` | `<div>`, `<p>` | HTML-теги |
| `Text` | `"Hello"` | Текст усередині тегів |
| `Comment` | `` | Коментарі |
| `Attribute` | `class="title"` | Атрибути елементів |

---

## Робота з DOM через JavaScript

### 1. Отримання елементів

```javascript
document.getElementById('id');
document.getElementsByClassName('class');
document.getElementsByTagName('p');
document.querySelector('.class');
document.querySelectorAll('p');
```

> Сучасні способи - `querySelector()` і `querySelectorAll()`.

---

### 2. Зміна вмісту

```javascript
const el = document.querySelector('h1');

el.textContent = 'Привіт, світ!';   // Змінює текст
el.innerHTML = '<em>Привіт!</em>'; // Вставляє HTML
```

---

### 3. Зміна атрибутів і стилів

```javascript
el.id = 'title';
el.setAttribute('data-role', 'main');
el.style.color = 'red';
el.classList.add('active');
```

---

### 4. Створення і додавання елементів

```javascript
const newDiv = document.createElement('div');
newDiv.textContent = 'Я новий блок';
document.body.appendChild(newDiv);
```

> Можна створювати, вставляти і видаляти вузли, тим самим **динамічно змінюючи сторінку**.

---

### 5. Видалення елементів

```javascript
const p = document.querySelector('p');
p.remove();
```

---

### 6. Навігація по дереву

```javascript
const el = document.querySelector('div');
el.parentElement;  // батько
el.children;       // дочірні елементи
el.firstElementChild; // перший нащадок
el.nextElementSibling; // сусідній елемент
```

---

## Приклад: динамічна зміна сторінки

```javascript
<ul id="list">
  <li>JS</li>
  <li>HTML</li>
</ul>

> Тепер список стане:
>
> ```javascript
> JS
> HTML
> CSS
> ```

---

## Підсумок

| Параметр | **HTML** | **DOM** |
|---|---|---|
| Що це | Розмітка документа | Структура в пам'яті |
| Формат | Текст (теги) | Об'єкти |
| Змінюється JS | Ні | Так |
| Місце існування | На диску (файл) | У браузері (у пам'яті) |
| Взаємодія | Тільки парситься | Можна читати, змінювати, видаляти вузли |

---

## Коротко:

> **DOM** - це "жива" версія HTML, з якою працює JavaScript.
> Вона представляє сторінку як **об'єктне дерево**, де вузли можна **читати, змінювати і видаляти**.

Формула для запам'ятовування:
**HTML** - це текст,
**DOM** - це структура об'єктів,
**JS** - це інструмент для керування цією структурою.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати540 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.