How does window differ from document?

JavaScriptJunior~2 min read

1. The main difference:

Object	What it represents
`window`	the entire browser window in which the page is loaded
`document`	the HTML document itself (the window's inner content)

You could say:

window is "the entire browser window" document is "the page inside that window"

2. Relationship:

document sits inside window:

javascript

window.document === document; // true

That is:

javascript

window
 └── document (the page's DOM)

3. What belongs to each object:

`window`

Represents the tab's environment itself; contains everything related to the browser.

Examples:

javascript

window.innerWidth;     // window width
window.alert("Hi!");   // popup window
window.location.href;  // page URL
window.localStorage;   // storage

It also includes:

document (the page itself),
history (back/forward navigation),
navigator (browser info),
screen, console, setTimeout, fetch, and much more.

`document`

Represents the HTML page inside the window, that is, the DOM tree.

Examples:

javascript

document.title;                   // Page title
document.body;                    // <body>...</body>
document.querySelector("h1");     // Find an element
document.createElement("p");      // Create an element

document is responsible only for the page's content: its structure, tags, text, styles, and so on.

4. An example combining both:

HTML:

javascript

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello</h1>
    <button id="btn">Click me</button>
  </body>
</html>

JS:

javascript

// through document we work with the page
const btn = document.getElementById("btn");
btn.addEventListener("click", () => alert("Click!"));

// through window we work with the browser
console.log(window.innerWidth); // window width
console.log(window.location.href); // URL

5. Comparison by function

Capability	`window`	`document`
Controls the HTML page	Indirectly	Yes
Controls the tab/browser	Yes	No
Contains the DOM tree	Yes (via document)	Yes, is the DOM object itself
Methods for finding elements	No	Yes
Methods for navigation and storage	Yes	No
Parent object	-	`window`
Global variables	Stored here	-

6. A real-life example:

window is the whole apartment (with walls, windows, and doors);
document is the room inside it (where the furniture is, and everything can be rearranged).

You can:

through document change the furniture (DOM elements),
through window open the door, look out the window, or turn on the light (actions related to the apartment itself, not the room).

In short:

Property	window	document
Represents	The browser window (tab)	The HTML document inside it
Type	Global environment object	DOM object
Where it's created	By the browser when the tab opens	After HTML parsing
Contains	`document`, `location`, `history`, `navigator`, APIs, etc.	DOM elements and the page's structure
Used for	Timers, URL, events, storage	Manipulating HTML and the DOM
Example	`window.innerWidth`	`document.body`

Summary: window is the entire browser window and its environment. document is the HTML page inside that window.

Through window you control the browser, through document you control the page's content.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.