Suggest an edit

Improve this article

Refine the answer for “The difference between window and document”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

**`window` is the entire browser window (tab) together with its environment, while `document` is the HTML page inside that window, that is, the DOM tree.** `document` is a property of `window`, so `window.document === document` returns `true`. Through `window` you control the browser: viewport size (`innerWidth`), URL and navigation (`location`), history (`history`), storage (`localStorage`), timers, `fetch`, dialog boxes. Through `document` you control the page content: finding elements (`querySelector`), creating and changing nodes (`createElement`), the title (`title`), the `body`. `window` is created by the browser when the tab opens, while `document` appears after the HTML is parsed. Global variables are stored on `window`, not on `document`.

```javascript
window.document === document; // true
console.log(window.innerWidth); // browser window width
console.log(document.body);     // the page body element
```

**Key point:** `window` is the browser window, `document` is the page inside it; `document` is nested in `window`.

Shown above the full answer for quick recall.

Answer (EN)

**`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".

### How they are related
`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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts815 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.