HTML DOM Introduction

By the end, you can explain how the browser turns HTML into a DOM tree and use JavaScript to access and inspect nodes such as document.body.

What it is

The HTML DOM, or Document Object Model, is the browser's live object representation of a page. When the browser parses HTML, it builds a tree of nodes. The document is the root, elements such as <p> and <div> are branches, and text nodes are leaves.

JavaScript does not see raw HTML text. It sees objects with properties and methods. Related terms include node, element, attribute, property, and event.

Why it matters

• It lets scripts change page content without reloading the browser.
• It lets scripts respond to clicks, typing, scrolling, and other user actions.
• It is the foundation for form validation, dynamic lists, menus, and single-page apps.
• It helps you debug pages by inspecting what the browser actually built.

Syntax or steps

The smallest useful pattern is: start from document, select a node, then read or change it.

const body = document.body;
console.log(body.tagName);
body.style.backgroundColor = "lightyellow";

1. document.body gets the body element object.
2. body.tagName reads the element's tag name.
3. body.style.backgroundColor changes a CSS property through the DOM.

Example

<!doctype html>
<html>
  <body>
    <h1 id="title">Hello</h1>
    <button id="go">Change</button>

    <script>
      const title = document.getElementById("title");
      const button = document.getElementById("go");

      button.addEventListener("click", () => {
        title.textContent = "DOM is ready";
        title.style.color = "darkblue";
      });
    </script>
  </body>
</html>

Part by part

• The HTML creates two elements: a heading and a button.
• The script runs after those elements are parsed, so getElementById can find them.
• addEventListener attaches a click handler to the button.
• Inside the handler, textContent changes the heading text, and style.color changes its color.

Common mistakes

• Running scripts too early. If JavaScript looks for an element before the browser has parsed it, the result is null. Fix: place the script near the end of <body> or use defer.
• Confusing HTML strings with DOM objects. A string like "<p>Hi</p>" is not an element until the browser parses it. Fix: use DOM methods such as createElement or trusted innerHTML.
• Using innerHTML for plain text. It can insert markup and may create security risks. Fix: use textContent when you only need text.
• Assuming document.body always exists. It usually does in normal pages, but it can be null during early parsing. Fix: wait for DOMContentLoaded if needed.

When to use it

Use the DOM API when you need to inspect or change a live page. Use plain HTML when the content is static. Use innerHTML only when inserting trusted markup quickly.

Practice

1. Guided: create a page with <p id="note">Before</p>. Use document.getElementById("note") to change the text to "After". Expected output: the paragraph shows After.
2. Challenge: add a button that toggles a class on document.body. Hint: use document.body.classList.toggle("dark").

Quick check

Question: What does document.body return?

Answer: It returns the DOM element object for the page's <body> tag, or null if the body has not been parsed yet.

Summary

The DOM is the browser's object tree for HTML. JavaScript uses it to read, change, and respond to page content. Learning to start from document and inspect nodes is the foundation for interactive web pages.