What is the DOM

Table of Contents +

In the previous lesson, we learned how rest parameters gather many arguments into one array. Now let’s move into the browser and meet the DOM, the bridge that lets JavaScript read and change a web page.

🌳 What is the DOM?

The DOM stands for the Document Object Model. When a browser loads an HTML file, it reads the markup and builds a tree of objects that represents the page. That tree of objects is the DOM.

Each piece of the page, an element like <h1>, a paragraph like <p>, or a <button>, becomes an object in this tree. JavaScript works with these objects to read what is on the page and to change it.

The DOM is the connection between your HTML and your JavaScript. The HTML describes the starting page, and the DOM is the live version of that page that your code can talk to.

📄 The document Object

The entry point to the DOM is the document object. The browser gives you this object for free on every page, and everything on the page lives inside it.

This is how you reach the page title and the body through document:

what-is-dom.js
console.log(document.title); // the text in the browser tab
console.log(document.body); // the <body> element and everything inside it

Let’s walk through what each line reads from the page:

  • document.title pulls the text shown on the browser tab and prints it to the console.
  • document.body grabs the <body> element together with every element nested inside it.

document is your starting point. From it you can reach any element, read its contents, and change what the user sees.

🌲 The DOM is a Tree of Nodes

The DOM is shaped like a tree. Each object in the tree is called a node, and elements like <h1>, <p>, and <button> are the most common kind of node.

Take this small HTML page:

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Hello there</p>
    <button>Click me</button>
  </body>
</html>

Let’s see how this markup is laid out:

  • <html> wraps the whole page and holds the two main sections.
  • <head> carries page information, here the <title> that names the browser tab.
  • <body> holds the visible content: an <h1> heading, a <p> paragraph, and a <button>.

The browser turns that page into a tree that looks like this:

document
└── html
    ├── head
    │   └── title  ("My Page")
    └── body
        ├── h1     ("Welcome")
        ├── p      ("Hello there")
        └── button ("Click me")

This tree shows how the elements nest inside one another:

  • document is the root the browser hands you, and html sits just below it as the top element.
  • html branches into head and body, the two main sections of the page.
  • head holds the title, while body holds the h1, p, and button as siblings side by side.

The html element sits at the top. It branches into head and body, and each of those branches into the elements inside them. Every box in that tree is a node JavaScript can reach.

🔴 The DOM is Live

The DOM is a live representation of the page. When your JavaScript changes a node in the DOM, the browser instantly updates what the user sees on the screen.

This line changes the text of the page heading, and the new text appears right away:

what-is-dom.js
document.body.innerHTML = "<h1>The page just changed!</h1>";

Let’s break down what this single line does:

  • document.body reaches the <body> element through the document entry point.
  • .innerHTML = "..." replaces everything inside the body with the new HTML string, so the browser draws the fresh <h1> on the spot.

The HTML file on disk never changes. JavaScript edits the DOM, and the visible page follows along.

Why this matters

Every interactive page, from a like button to a live search box, works by changing the DOM. Learning the DOM is learning how to make pages respond to your users.

⚠️ Common Mistakes to Avoid

Mistake Problem Solution
Confusing the HTML file with the DOM The HTML is the starting text; the DOM is the live tree built from it Remember the browser builds the DOM from the HTML, then JavaScript works on the DOM
Running code before the page loads The elements do not exist yet, so your code finds nothing Place the <script> at the end of <body> or wait for the page to load
Thinking the DOM is the HTML source string The DOM is a tree of objects, not raw text Use DOM methods and properties, not text matching, to work with the page

🔧 Try It Yourself!

  1. Open any web page in your browser, then open DevTools (right-click and choose “Inspect”, or press F12).
  2. Click the “Elements” tab to see the DOM tree the browser built for the page.
  3. Expand the html node, then body, and notice how each element nests inside its parent, just like the tree above.
  4. In the “Console” tab, type document.title and press Enter to read the page title straight from the DOM.

🧩 What You’ve Learned

  • ✅ The DOM is a tree of objects the browser builds when it loads an HTML page
  • ✅ The document object is the entry point to everything on the page
  • ✅ Elements like <h1>, <p>, and <button> become nodes in the DOM tree
  • ✅ The DOM is live: changing it changes what the user sees right away
  • ✅ The DOM is built from the HTML but is not the same as the HTML source text

🚀 What’s Next?

Now that you know what the DOM is, the next step is finding the elements you want to work with. Let’s continue to Selecting Elements.

Previous JavaScript Rest Parameters Next Selecting DOM Elements

Share & Connect

Share on LinkedIn