DOM Introduction

The bridge between JavaScript and the web page. Everything starts here.

What is the DOM?

A programming interface for HTML documents.

// The DOM (Document Object Model) is:
// 1. A TREE representation of your HTML
// 2. An API that JavaScript uses to read/change the page
// 3. Created by the browser when it parses HTML

// HTML → Browser parses → DOM tree → Rendered page
//                           ↑
//                    JavaScript accesses this

When a browser loads HTML, it creates a tree of objects in memory — the DOM. JavaScript can read and modify this tree, and the browser updates the page accordingly.

1 / 2

The DOM Tree

HTML structure becomes a tree of parent-child nodes.

<!-- HTML: -->
<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)

└─ body

├─ h1

│ └─ "Hello" (text)

└─ p

└─ "World" (text)

💡 Every piece of text, every tag, even comments — they're all nodes in this tree. Parent nodes contain child nodes.

Node Types

Not everything in the DOM is an element.

Node TypeExamplenodeType
Element<div>, <p>, <h1>1
Text"Hello world"3
Comment<!-- note -->8
Documentdocument9
DocumentFragmentvirtual container11
const div = document.querySelector("div");

div.nodeType;    // 1 (Element)
div.nodeName;    // "DIV"

// Text nodes are children of elements:
div.childNodes;  // NodeList [text, span, text, ...]
div.children;    // HTMLCollection [span] (elements only!)

// Most of the time, use .children (elements only)
// .childNodes includes whitespace text nodes

The document Object

Your entry point to the entire DOM.

// The document object is the root:
document.documentElement; // <html>
document.head;           // <head>
document.body;           // <body>
document.title;          // page title (read/write)

// Finding elements:
document.getElementById("app");
document.querySelector(".card");
document.querySelectorAll("li");

// Creating elements:
document.createElement("div");
document.createTextNode("hello");

// Info about the page:
document.URL;             // current URL
document.readyState;      // "loading" | "interactive" | "complete"
document.cookie;          // cookies string

document is a global object — available everywhere in browser JavaScript. It's your gateway to reading and changing anything on the page.

DOM vs HTML

They're related but not the same thing.

HTML (source)

  • • Static text file
  • • What you write
  • • Doesn't change
  • • View Source shows this

DOM (live)

  • • Live object tree
  • • Browser creates it
  • • JS can modify it
  • • DevTools shows this
// The DOM can differ from HTML:

// 1. Browser fixes invalid HTML:
// <table><tr><td>Hi</td></tr></table>
// Browser adds <tbody> automatically

// 2. JavaScript modifies the DOM:
document.body.innerHTML = "<h1>New!</h1>";
// HTML file unchanged, but DOM (and page) updated

// 3. DevTools "Elements" tab = live DOM
//    "View Source" = original HTML

FAQ

Common questions about the DOM.