Curriculum Series

Window object vs Document object

Window object vs Document object

Window object vs Document object

JavaScript

The short answer

The window object represents the browser window and is the global object in JavaScript. Everything — variables, functions, the DOM — lives inside it. The document object is a property of window that represents the HTML document loaded in the page. You use window for browser-level things (navigation, timers, screen size) and document for DOM manipulation.

The Window object

window is the top-level object. When you declare a global variable or function, it becomes a property of window.

JAVASCRIPT
1// These are all on the window object
2window.alert('Hello');
3window.setTimeout(() => {}, 1000);
4window.innerWidth; // browser viewport width
5window.location.href; // current URL
6
7// You can skip "window." — it is implied
8alert('Hello');
9setTimeout(() => {}, 1000);

Common things on window:

  • window.location — the current URL
  • window.history — browser history navigation
  • window.localStorage / window.sessionStorage — storage
  • window.innerWidth / window.innerHeight — viewport dimensions
  • window.navigator — browser information
  • setTimeout, setInterval, fetch, alert, console

The Document object

document is a property of window (window.document). It represents the HTML page and provides methods to access and modify DOM elements.

JAVASCRIPT
1// Selecting elements
2document.getElementById('header');
3document.querySelector('.btn');
4document.querySelectorAll('p');
5
6// Creating elements
7const div = document.createElement('div');
8
9// Reading document info
10document.title; // page title
11document.URL; // current URL
12document.cookie; // cookies

The relationship

JAVASCRIPT
1window (global object)
2 ├── document (the DOM)
3 ├── location
4 ├── history
5 ├── navigator
6 ├── localStorage
7 ├── console
8 ├── setTimeout
9 ├── fetch
10 └── ... everything else

document lives inside window. window.document and document are the same thing.

Interview Tip

Keep it simple: window is the browser, document is the page. Use window for browser APIs (location, storage, timers) and document for DOM manipulation (selecting elements, creating elements, reading page content).

Why interviewers ask this

This tests basic web platform knowledge. Interviewers want to see if you understand the JavaScript runtime environment in the browser and how the global object relates to the DOM. It is a foundational concept that comes up when discussing scope, global variables, and DOM APIs.

Finished reading?

Mark this topic as solved to track your progress.