Чим window відрізняється від document?

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

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 - вмістом сторінки.

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

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

Premium

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