Suggest an edit

Improve this article

Refine the answer for “How does window differ from document?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.