19. JavaScript DOM Introduction

What you will learn

• What the DOM is
• How a page becomes a tree of objects
• The document object
• What you can do with the DOM

What is the DOM?

The DOM (Document Object Model) is the browser’s live, in-memory version of your HTML page. When the browser reads your HTML, it builds a tree of objects, one for each element, piece of text, and attribute. JavaScript can read and change this tree, and the browser updates the page to match.

This is the bridge between JavaScript and the page. Everything interactive on a website, from menus to quizzes, works through the DOM.

The tree

Take this small page:

<html>
  <body>
    <h1 id="title">Hello</h1>
    <p>A <strong>short</strong> page.</p>
  </body>
</html>

The browser turns it into a family tree:

document
 └── html
      └── body
           ├── h1  (id="title")
           │    └── "Hello"
           └── p
                ├── "A "
                ├── strong
                │    └── "short"
                └── " page."

• Each box is a node.
• An element inside another is its child. The one outside is its parent.
• Elements next to each other are siblings.

The document object

document is the top of the tree and your starting point for everything. It gives you ways to find elements, create new ones, and read facts about the page.

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML =
    "Title: " + document.title + "<br>" +
    "Language: " + document.documentElement.lang + "<br>" +
    "Number of paragraphs: " + document.querySelectorAll("p").length;
</script>

What can you do with the DOM?

A first change to the page

<h1 id="title">Hello</h1>
<p>This paragraph will be styled by JavaScript.</p>

<script>
  const title = document.getElementById("title");
  title.textContent = "Hello, DOM!";
  title.style.color = "#0d6efd";

  document.querySelector("p").style.fontStyle = "italic";
</script>

The DOM is not your HTML file

Your HTML file is the starting recipe. The DOM is the living page. If JavaScript adds a new paragraph, the DOM has it, but your file on the server does not change. Reloading the page rebuilds the DOM from the original HTML.

Wait for the page

A script can only find elements that already exist. As you learned earlier, put your script after the elements, or use defer in an external script. You can also wait for the browser’s signal:

document.addEventListener("DOMContentLoaded", function () {
  // the page structure is ready, so it is safe to find elements here
});

Common mistakes

• Running a script before the elements exist, so getElementById returns null.
• Thinking the DOM and the HTML file are the same thing.
• Misspelling a method name, such as getElementByID.
• Forgetting that changes disappear when the page reloads.

<h2 id="heading">Old heading</h2>
<p>Some text.</p>

<script>
  const heading = document.getElementById("heading");
  heading.textContent = "New heading";
  heading.style.color = "crimson";
</script>

Summary

• The DOM is a tree of objects that represents the page.
• JavaScript uses document to find, change, create, and remove elements.
• Scripts must run after the elements they use exist.