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

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

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

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

Контент

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

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

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

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

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

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

---

## 1. Що таке document

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

Тобто, якщо HTML-код виглядає так:

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

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

---

## 2. Приклад:

```javascript
console.log(document.title);          // виводить заголовок сторінки
console.log(document.body);           // <body>...</body>
console.log(document.URL);            // адреса сторінки
console.log(document.getElementById); // функція доступу до елементів
```

`document` - це **головний інтерфейс для роботи з усією сторінкою**.

---

## 3. Головне: document - це "вхід у DOM"

Через нього ти можеш:

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

---

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

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

```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("Кнопку натиснуто!");
});
```

---

## 5. Основні властивості об'єкта 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>`) |

---

## 6. Основні методи document:

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

---

## 7. Взаємозв'язок з window:

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

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

- `window` - все вікно браузера, включно з вкладкою, localStorage, історією тощо.
- `document` - лише **вміст поточної сторінки**.

---

## Коротко:

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

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

Для рев’юера

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

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