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

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

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

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

Контент

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

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

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

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

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

## 1. Головна відмінність:

| Об'єкт | Що являє собою |
| --- | --- |
| `window` | усе **вікно браузера**, в якому завантажена сторінка |
| `document` | сам **HTML-документ** (внутрішній вміст вікна) |

Можна сказати:

> `window` - це "усе вікно браузера"
> `document` - це "сторінка всередині цього вікна"

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

`document` перебуває **всередині** `window`:

```javascript
window.document === document; // true
```

Тобто:

```javascript
window
 └── document (DOM сторінки)
```

## 3. Що входить у кожен об'єкт:

### `window`

Являє собою саме **середовище вкладки**, містить усе, що стосується браузера.

Приклади:

```javascript
window.innerWidth;     // ширина вікна
window.alert("Hi!");   // спливаюче вікно
window.location.href;  // URL сторінки
window.localStorage;   // сховище
```

Також включає:

- `document` (сама сторінка),
- `history` (переходи назад/вперед),
- `navigator` (інфо про браузер),
- `screen`, `console`, `setTimeout`, `fetch`, і багато іншого.

### `document`

Являє собою **HTML-сторінку** всередині вікна, тобто **DOM-дерево**.

Приклади:

```javascript
document.title;                   // Заголовок сторінки
document.body;                    // <body>...</body>
document.querySelector("h1");     // Пошук елемента
document.createElement("p");      // Створення елемента
```

`document` відповідає лише за **контент** сторінки - її структуру, теги, текст, стилі тощо.

## 4. Приклад разом:

HTML:

```javascript
<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Привіт</h1>
    <button id="btn">Натисни</button>
  </body>
</html>
```

JS:

```javascript
// через document працюємо зі сторінкою
const btn = document.getElementById("btn");
btn.addEventListener("click", () => alert("Клік!"));

// через window працюємо з браузером
console.log(window.innerWidth); // ширина вікна
console.log(window.location.href); // URL
```

## 5. Порівняння за функціями

| Можливість | `window` | `document` |
| --- | --- | --- |
| Керує HTML-сторінкою | Опосередковано | Так |
| Керує вкладкою/браузером | Так | Ні |
| Містить DOM-дерево | Так (через document) | Так, сам об'єкт DOM |
| Методи для пошуку елементів | Ні | Так |
| Методи для навігації та сховища | Так | Ні |
| Батьківський об'єкт | - | `window` |
| Глобальні змінні | Зберігаються тут | - |

## 6. Приклад із реального життя:

- `window` - це **вся квартира** (зі стінами, вікнами і дверима);
- `document` - це **кімната всередині неї** (де стоять меблі і все можна переставляти).

Ти можеш:

- через `document` змінювати меблі (DOM-елементи),
- через `window` - відкрити двері, подивитися у вікно або увімкнути світло (дії, що стосуються самої квартири, а не кімнати).

## Коротко:

| Властивість | **window** | **document** |
| --- | --- | --- |
| Являє собою | Вікно (вкладку) браузера | HTML-документ усередині |
| Тип | Глобальний об'єкт середовища | Об'єкт DOM |
| Де створюється | Браузером при відкритті вкладки | Після парсингу HTML |
| Містить | `document`, `location`, `history`, `navigator`, API та ін. | DOM-елементи і структуру сторінки |
| Використовується для | Таймерів, URL, подій, сховища | Маніпуляцій з HTML та DOM |
| Приклад | `window.innerWidth` | `document.body` |

> **Підсумок:**
> `window` - усе вікно браузера і його середовище.
> `document` - HTML-сторінка всередині цього вікна.
>
> Через `window` ти керуєш браузером,
> через `document` - вмістом сторінки.

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

Для рев’юера

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

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