AI Workshop: learn to build apps with AI →
The DOM: The `window` object

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


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 for printing error messages or logging, using console.log, console.error and other tools (see the Browser DevTools article)
  • document (as mentioned above) points to the document object, which is key for the DOM interactions you’ll 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 window
  • removeEventListener(): remove an event listener from the window

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
6: Selectors API
7: DOM Ready
8: Add a class to an element
9: Remove a class from an element
10: Check if element has a class
11: Change a DOM node value
12: Loop through DOM elements
13: Add an image to the DOM
14: Create a DOM attribute
15: Remove children elements
16: Replace a DOM element
17: insertAdjacentHTML
18: Add click events to a list