Loading...
Loading...
The bridge between JavaScript and the web page. Everything starts here.
The Document Object Model is how JavaScript reads and changes web pages. Selecting elements, modifying content, handling events, validating forms, and persisting data in storage are the core skills of frontend development.
The DOM is the browser's live tree representation of your HTML — nodes you can select, modify, and attach listeners to. See how documents become objects JavaScript can control.
JavaScript in the browser is all about the DOM — the live tree of HTML elements your code can select, modify, and respond to. Click handlers, form validation, dynamic content updates, and local storage all build on DOM APIs.
This module takes you from querySelector to full user interaction patterns. You will learn event delegation, form handling, and how to persist state in localStorage — the skills every frontend developer uses daily.
Frameworks like React still render into the DOM. Understanding the tree structure explains selectors, expensive reflows, event bubbling, and what abstractions like virtual DOM are optimizing for.
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.
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.
Not everything in the DOM is an element.
| Node Type | Example | nodeType |
|---|---|---|
| Element | <div>, <p>, <h1> | 1 |
| Text | "Hello world" | 3 |
| Comment | <!-- note --> | 8 |
| Document | document | 9 |
| DocumentFragment | virtual container | 11 |
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
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.
They're related but not the same thing.
HTML (source)
DOM (live)
// 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
Common questions about dom introduction.