What Is the DOM?

Up until now, our programs have lived in the console. That's fine for learning, but nobody visits a website to stare at the console. It's time to make JavaScript do what it was born to do: control web pages.

When your browser loads an HTML file, it doesn't just display the text. It reads the HTML and builds a model of the page in memory: a big family tree of objects, one for every element on the page. This model is called the DOM, which stands for Document Object Model.

Look at this simple page:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>Welcome to my page.</p>
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </body>
</html>

The browser turns it into the tree in the picture. At the very top is the document object, which represents the whole page. Inside it is <html>, which has two children: <head> and <body>. The <body> has three children: <h1>, <p> and <ul>. Those three are siblings (they share the same parent). And so on, all the way down. Each box in the tree is called a node, and nodes that represent HTML tags are called elements.

Here's the magic part: the DOM is live. When JavaScript changes the DOM, the browser instantly updates what's on the screen. Change the text of the <h1> node, and the heading on the page changes. Add a new <li> node, and a new item appears in the list. No reloading needed.

That's how every interactive website works. Every "like" button, every pop-up menu, every live search result: it's all JavaScript changing the DOM.