The DOM: The `window` object

The window object represents the window that contains the DOM document.

window.document points to the document object loaded in the window.

Properties and methods of this object can be called without referencing window explicitly, because it represents the global object. So, the previous property window.document is usually called just document.

Properties

Here is a list of useful properties you will likely reference a lot:

  • console points to the browser debugging console. Useful to print error messages or logging, using console.log, console.error and other tools (see the Browser DevTools article)
  • document as already said, points to the document object, key to the DOM interactions you will perform
  • history gives access to the History API
  • location gives access to the Location interface, from which you can determine the URL, the protocol, the hash and other useful information.
  • localStorage is a reference to the Web Storage API localStorage object
  • sessionStorage is a reference to the Web Storage API sessionStorage object

Methods

The window object also exposes useful methods:

  • alert(): which you can use to display alert dialogs
  • postMessage(): used by the Channel Messaging API
  • requestAnimationFrame(): used to perform animations in a way that’s both performant and easy on the CPU
  • setInterval(): call a function every n milliseconds, until the interval is cleared with clearInterval()
  • clearInterval(): clears an interval created with setInterval()
  • setTimeout(): execute a function after ‘n’ milliseconds
  • setImmediate(): execute a function as soon as the browser is ready
  • addEventListener(): add an event listener to the document
  • removeEventListener(): remove an event listener from the document

See the full reference of all the properties and methods of the window object at https://developer.mozilla.org/en-US/docs/Web/API/Window

Lessons in this unit:

0: Introduction
1: ▶︎ The `window` object
2: The `document` object
3: Types of nodes
4: Traversing the DOM
5: Editing the DOM
Want to learn more? Check out our courses