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

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

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

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

Контент

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

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

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

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

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

**«Дерево елементів» (або DOM-дерево)** - це **внутрішня структура**, яку браузер будує, коли читає HTML-код.
Вона показує, **які елементи є на сторінці і як вони пов'язані між собою**: хто є "батьком", "дочірнім елементом" тощо.

---

### Що це означає на практиці

Браузер не просто бачить текст із тегами на кшталт:

```html
<body>
  <h1>Привіт</h1>
  <p>Це приклад</p>
</body>
```

Він перетворює його на **ієрархію об'єктів**, де кожен тег - **вузол дерева**.

Візуально це виглядає так:

```javascript
html
 └── body
      ├── h1
      │    └── "Привіт"
      └── p
           └── "Це приклад"
```

---

### Чому це називається «деревом»

- У **кореня** є один головний елемент: `<html>`.
- У нього є **гілки**: `<head>` і `<body>`.
- Усередині них: **дочірні елементи**: заголовки, абзаци, посилання тощо.
- Кожен тег може містити **інші теги або текст**, утворюючи структуру, схожу на **розгалужене дерево**.

---

### Як браузер використовує це дерево

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

Наприклад:

```javascript
document.body.style.background = "lightblue";
```

Тут `document` - це все дерево сторінки,
а `body` - один із його вузлів, до якого ми звертаємося напряму.

---

### Проста аналогія

Уяви HTML-сторінку як **сімейне дерево**:

- У батька `<body>` є діти `<h1>` і `<p>`.
- У `<h1>` є «нащадок»: текст «Привіт».
- Усі вони пов'язані, і якщо змінити батька, зміниться й те, що всередині нього.

---

### Підсумок:

| Поняття | Що це означає |
|---|---|
| **Дерево елементів** | Структура, що показує, як теги вкладені одне в одне |
| **DOM (Document Object Model)** | Технічна реалізація цього дерева всередині браузера |
| **Вузол (node)** | Кожен елемент HTML - окрема «гілка» дерева |

---

**Простими словами:**
«Дерево елементів» - це **карта HTML-сторінки**, яку браузер будує, щоб **розуміти її структуру і вміти з нею працювати**.
Завдяки цьому JavaScript може «дотягнутися» до будь-якого елемента і змінити сторінку прямо на ходу.

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

Для рев’юера

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

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