Introduction to the DOM

Understand the Document Object Model — what it is, how browsers build it, and why it matters for interactive web pages.

Introduction to the DOM

The Document Object Model (DOM) is the bridge between HTML and JavaScript. When a browser loads a web page, it parses the HTML and builds a tree-like structure of objects called the DOM. JavaScript can then interact with this tree to read, change, add, or remove elements on the page.

What Is the DOM?

The DOM is a programming interface for HTML documents. It represents the page as a tree of nodes — every HTML element, attribute, and piece of text is a node in this tree. JavaScript can access and manipulate any node.

The DOM Tree

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

DOM Tree:

document
└── html
    ├── head
    │   └── title
    │       └── "My Page" (text node)
    └── body
        ├── h1
        │   └── "Hello" (text node)
        └── p
            └── "World" (text node)

The document Object

The document object is the entry point to the DOM. It represents the entire HTML page and provides methods to find and manipulate elements.

console.log(document);          // The entire DOM
console.log(document.head);     // The <head> element
console.log(document.body);     // The <body> element
console.log(document.title);    // The page title
console.log(document.URL);      // The page URL

Types of Nodes

Node Type	Example	nodeType Value
Element node	`<h1>`, `<p>`, `<div>`	1
Text node	Text inside an element	3
Comment node	`<!-- comment -->`	8
Document node	The `document` itself	9

Why Learn the DOM?

Make web pages interactive — respond to clicks, form submissions, key presses
Dynamically add, remove, and update content without reloading the page
Change styles, classes, and attributes on the fly
Build single-page applications, games, and real-time interfaces
Understand how frameworks like React and Vue work under the hood

Key Takeaways

The DOM is a tree of objects that represents the HTML document
The document object is the entry point for all DOM interactions
Every HTML element, text, and comment is a node in the DOM tree
JavaScript uses the DOM API to read and manipulate web pages