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

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

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

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

Контент

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

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

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

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

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

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

## Теорія

### TL;DR

- `document` це глобальний об'єкт, який браузер створює автоматично при завантаженні сторінки.
- Він представляє документ цілком і є коренем DOM-дерева.
- Через нього шукають, створюють, змінюють і видаляють вузли, а також слухають події.
- Ключові властивості: `documentElement`, `head`, `body`, `title`, `URL`, `cookie`, `forms`.
- Ключові методи: `querySelector`, `querySelectorAll`, `getElementById`, `createElement`, `appendChild`, `addEventListener`.
- `document` лежить усередині `window`: `window.document === document`.

### Швидкий приклад

Якщо HTML виглядає так:

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>Привіт, світ!</h1>
  </body>
</html>
```

то в пам'яті браузера створюється DOM-структура, а `document` це об'єкт, через який до неї можна звернутися:

```javascript
console.log(document.title);          // prints the page title
console.log(document.body);           // <body>...</body>
console.log(document.URL);            // the page address
console.log(document.getElementById); // the function that looks elements up
```

### Що дає `document`

`document` це головний інтерфейс для роботи з усією сторінкою. Через нього можна:

- **шукати елементи** (`getElementById`, `querySelector`, `getElementsByClassName`);
- **змінювати їхній вміст** (`textContent`, `innerHTML`);
- **створювати нові вузли** (`createElement`);
- **видаляти або переміщати елементи** (`remove`, `appendChild`);
- **реагувати на події** (`addEventListener`);
- **працювати з атрибутами, стилями і класами**.

### Приклади використання

Отримати елемент:

```javascript
const heading = document.querySelector('h1');
console.log(heading.textContent); // "Привіт, світ!"
```

Змінити текст:

```javascript
heading.textContent = 'Вітаю!';
```

Створити і додати елемент:

```javascript
const p = document.createElement('p');
p.textContent = 'Це новий абзац';
document.body.appendChild(p);
```

Змінити стиль:

```javascript
heading.style.color = 'red';
```

Повісити обробник події:

```javascript
document.querySelector('button').addEventListener('click', () => {
  alert('Кнопку натиснуто!');
});
```

### Основні властивості об'єкта `document`

| Властивість | Що робить |
| --- | --- |
| `document.documentElement` | `<html>`, кореневий елемент |
| `document.head` | `<head>` |
| `document.body` | `<body>` |
| `document.title` | Заголовок сторінки |
| `document.URL` | Поточний URL |
| `document.cookie` | Доступ до cookie |
| `document.forms` | Усі форми на сторінці |
| `document.images` | Усі зображення |
| `document.links` | Усі посилання (`<a>`) |

### Основні методи `document`

| Метод | Опис |
| --- | --- |
| `getElementById(id)` | Знайти елемент за ID |
| `getElementsByClassName(name)` | Усі елементи з класом |
| `getElementsByTagName(name)` | Усі елементи з тегом |
| `querySelector(selector)` | Перший елемент за CSS-селектором |
| `querySelectorAll(selector)` | Усі елементи за CSS-селектором |
| `createElement(tag)` | Створити елемент |
| `createTextNode(text)` | Створити текстовий вузол |
| `append()` / `appendChild()` | Додати елемент |
| `remove()` | Видалити елемент |
| `addEventListener(event, fn)` | Слухати події |

### Зв'язок із `window`

Об'єкт `document` міститься всередині глобального об'єкта `window`:

```javascript
console.log(window.document === document); // true
```

- `window` це все вікно браузера: вкладка, `localStorage`, історія, таймери і таке інше.
- `document` це лише вміст поточної сторінки.

Коротко:

| Питання | Відповідь |
| --- | --- |
| Що це таке | Об'єкт, що представляє HTML-документ |
| Де створюється | Автоматично при завантаженні сторінки |
| Що робить | Дає керування DOM |
| Кому належить | `window.document` |
| Основні методи | `querySelector`, `createElement`, `appendChild`, `addEventListener` |

### Типові помилки

- **Плутати `document` і `window`.** `window` це все вікно і глобальна область видимості, `document` це лише документ у ньому.
- **Звертатися до `document.body` зі скрипта в `<head>` без `defer`.** На той момент `body` ще не розібрано, і ви отримаєте `null`.
- **Вважати, що `document.getElementsByClassName` повертає масив.** Це «жива» HTMLCollection: методів масиву в неї немає, а її вміст змінюється разом із DOM. `querySelectorAll` повертає статичний NodeList.
- **Використовувати `document.write` після завантаження сторінки.** Виклик перезапише весь документ, це застарілий API.
- **Думати, що `document` доступний будь-де.** У Node.js і всередині Web Worker чи Service Worker його немає, там треба перевірку середовища.
- **Вставляти користувацький текст через `innerHTML`.** Це відкриває XSS, для тексту є `textContent`.

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

Для рев’юера

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

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