DocHero
Lesson 55 +10 XP

The DOM

The DOM

The DOM (Document Object Model) is JavaScript's view of an HTML page. It lets JavaScript access and change everything on the page.

What is the DOM?

When a page loads, the browser builds a tree of objects from the HTML. Each tag becomes a node in the tree. JavaScript can walk this tree and modify it.

<html>
  <body>
    <h1 id="title">Hello</h1>
    <p>Some text</p>
  </body>
</html>

The DOM lets you find the <h1>, read its text, or change it.

The document object

document represents the whole page. It is the starting point for everything DOM related.

The window object

window is the browser window itself. document is a property of it.

What you can do

  • Find elements (by id, tag, class).
  • Change text and HTML.
  • Change styles.
  • Create and remove elements.
  • React to user events.

A quick example

document.getElementById("title").innerHTML = "New Title";

TL;DR

  • The DOM is the browser's tree model of an HTML page.
  • document represents the page.
  • JavaScript uses the DOM to read and change pages.
  • Elements, styles, and events are all handled via the DOM.