Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Різниця між window і document». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`window`, це все вікно (вкладка) браузера разом з його оточенням, а `document`, це HTML-сторінка всередині цього вікна, тобто DOM-дерево.** `document` є властивістю `window`, тому `window.document === document` повертає `true`. Через `window` ви керуєте браузером: розміри області перегляду (`innerWidth`), URL і навігація (`location`), історія (`history`), сховище (`localStorage`), таймери, `fetch`, діалогові вікна. Через `document` ви керуєте вмістом сторінки: пошук елементів (`querySelector`), створення і зміна вузлів (`createElement`), заголовок (`title`), `body`. `window` створює браузер під час відкриття вкладки, а `document` з'являється після парсингу HTML. Глобальні змінні зберігаються у `window`, у `document` їх немає. ```javascript window.document === document; // true console.log(window.innerWidth); // browser window width console.log(document.body); // the page body element ``` **Ключове:** `window`, це вікно браузера, `document`, це сторінка всередині нього; `document` вкладений у `window`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**`window`, це все вікно браузера, в якому завантажена сторінка, а `document`, це сам HTML-документ, тобто внутрішній вміст цього вікна.** `document` вкладений у `window`, тому через перший об'єкт ви керуєте браузером, а через другий, вмістом сторінки. ## Теорія ### TL;DR - `window`, це вікно (вкладка) браузера та все його оточення. - `document`, це HTML-сторінка всередині вікна, тобто DOM-дерево. - `document` є властивістю `window`: `window.document === document` повертає `true`. - `window` дає таймери, `location`, `history`, `navigator`, `screen`, `localStorage`, `fetch`, діалоги. - `document` дає пошук, створення та зміну елементів сторінки. - Глобальні змінні зберігаються у `window`, у `document`, ні. ### Швидкий приклад ```javascript window.document === document; // true console.log(window.innerWidth); // browser window width console.log(window.location.href); // the page URL console.log(document.title); // the page title console.log(document.body); // the body element ``` ### Головна відмінність | Об'єкт | Що представляє | | --- | --- | | `window` | усе вікно браузера, в якому завантажена сторінка | | `document` | сам HTML-документ (внутрішній вміст вікна) | Можна сказати так: > `window`, це «усе вікно браузера». > `document`, це «сторінка всередині цього вікна». ### Взаємозв'язок `document` міститься всередині `window`: ```javascript window.document === document; // true ``` Тобто структура така: ```text window |-- document (the page DOM) ``` ### Що входить у кожен об'єкт `window` представляє саме оточення вкладки і містить усе, що стосується браузера: ```javascript window.innerWidth; // window width window.alert("Hi!"); // popup dialog window.location.href; // the page URL window.localStorage; // storage ``` Він також включає: - `document` (сама сторінка); - `history` (переходи назад і вперед); - `navigator` (інформація про браузер); - `screen`, `console`, `setTimeout`, `fetch` і багато іншого. `document` представляє HTML-сторінку всередині вікна, тобто DOM-дерево: ```javascript document.title; // the page title document.body; // <body>...</body> document.querySelector("h1"); // find an element document.createElement("p"); // create an element ``` `document` відповідає лише за контент сторінки: її структуру, теги, текст, стилі тощо. ### Приклад разом HTML: ```html <!DOCTYPE html> <html> <body> <h1 id="title">Hello</h1> <button id="btn">Click me</button> </body> </html> ``` JavaScript: ```javascript // through document we work with the page const btn = document.getElementById("btn"); btn.addEventListener("click", () => alert("Clicked!")); // through window we work with the browser console.log(window.innerWidth); // window width console.log(window.location.href); // URL ``` ### Порівняння за можливостями | Можливість | `window` | `document` | | --- | --- | --- | | Керує HTML-сторінкою | Опосередковано | Так | | Керує вкладкою чи браузером | Так | Ні | | Містить DOM-дерево | Так, через `document` | Сам є об'єктом DOM | | Методи пошуку елементів | Ні | Так | | Методи навігації та сховища | Так | Ні | | Батьківський об'єкт | немає | `window` | | Глобальні змінні | Зберігаються тут | немає | Побутова аналогія: `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`, вмістом сторінки. ### Типові помилки - Шукати елементи через `window`: методів `querySelector` чи `getElementById` там немає, вони належать `document`. - Вважати `document` глобальним об'єктом. Глобальним є `window`, а `document`, лише його властивість. - Звертатися до `document.body` до того, як HTML розпарсено. Скрипт у `<head>` без `defer` виконається раніше, і `document.body` буде `null`. - Плутати `window.innerWidth` (ширина області перегляду) зі `screen.width` (ширина екрана) або з `document.body.clientWidth`. - Переносити код у Node.js і очікувати, що там є `window` чи `document`. У Node.js їх немає, DOM існує лише в браузері.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.