Різниця між window і document

JavaScriptJunior~3 хв читання

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 існує лише в браузері.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.