The difference between window and document

JavaScriptJunior~3 min read

window is the whole browser window in which the page is loaded, while document is the HTML document itself, that is, the inner content of that window. document is nested inside window, so through the first object you control the browser and through the second the content of the page.

Theory

TL;DR

window is the browser window (tab) and its entire environment.
document is the HTML page inside the window, that is, the DOM tree.
document is a property of window: window.document === document returns true.
window gives you timers, location, history, navigator, screen, localStorage, fetch and dialogs.
document gives you searching for, creating and changing page elements.
Global variables are stored on window, not on document.

Quick example

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

The main difference

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

You can put it like this:

window is "the whole browser window". document is "the page inside that window".

document sits inside window:

javascript

window.document === document; // true

So the structure is:

text

window
 |-- document (the page DOM)

What belongs to each object

window represents the environment of the tab itself and contains everything related to the browser:

javascript

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

It also includes:

document (the page itself);
history (going back and forward);
navigator (information about the browser);
screen, console, setTimeout, fetch and much more.

document represents the HTML page inside the window, that is, the DOM tree:

javascript

document.title;                // the page title
document.body;                 // <body>...</body>
document.querySelector("h1");  // find an element
document.createElement("p");   // create an element

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

A combined example

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

Feature by feature comparison

Capability	`window`	`document`
Controls the HTML page	Indirectly	Yes
Controls the tab or browser	Yes	No
Contains the DOM tree	Yes, through `document`	It is the DOM object itself
Methods for finding elements	No	Yes
Methods for navigation and storage	Yes	No
Parent object	none	`window`
Global variables	Stored here	none

An everyday analogy: window is the whole flat with its walls, windows and doors, while document is a room inside it, where the furniture stands and can be rearranged. Through document you move the furniture (the DOM elements), and through window you open the door, look out of the window or switch on the light, that is, do things that concern the flat rather than the room.

A short summary table:

Property	`window`	`document`
Represents	The browser window (tab)	The HTML document inside
Type	The global environment object	A DOM object
When it is created	By the browser when the tab opens	After the HTML is parsed
Contains	`document`, `location`, `history`, `navigator`, APIs and more	DOM elements and the page structure
Used for	Timers, URLs, events, storage	Manipulating HTML and the DOM
Example	`window.innerWidth`	`document.body`

So window is the whole browser window and its environment, while document is the HTML page inside that window. Through window you control the browser, through document the content of the page.

Common mistakes

Looking for elements through window: there are no querySelector or getElementById methods there, they belong to document.
Treating document as the global object. The global object is window, and document is only one of its properties.
Accessing document.body before the HTML has been parsed. A script in <head> without defer runs earlier, so document.body will be null.
Confusing window.innerWidth (the viewport width) with screen.width (the screen width) or with document.body.clientWidth.
Moving code to Node.js and expecting window or document to be there. Node.js has neither; the DOM exists only in the browser.

Short Answer

Interview ready

Premium

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