DOM
In one line
The DOM (Document Object Model) is a tree-like representation of an HTML document that JavaScript can read and modify.
In simple words
When the browser loads an HTML page, it parses the markup and builds an in-memory tree of objects — one for every element, attribute, and piece of text. This tree is the DOM. It is the live, programmable representation of the page.
JavaScript can interact with the DOM to change the page without reloading. You can add or remove elements, change text, update styles, and respond to user events — all by manipulating DOM nodes. This is how every interactive web feature works, from dropdown menus to single-page apps.
The DOM is a standard API defined by the W3C, so the same JavaScript works across browsers. Common entry points are document.getElementById(), document.querySelector(), and element.addEventListener().
Example
// Change the text of an element
const heading = document.getElementById("title");
heading.textContent = "Hello, DOM!";
// Add a new element
const p = document.createElement("p");
p.textContent = "I was added by JavaScript.";
document.body.appendChild(p);JavaScript uses the DOM API to change text content and append new elements to the page.
How it works
- The browser parses the HTML and builds the DOM tree.
- JavaScript queries the tree with methods like
getElementById. - You modify nodes — change text, styles, attributes, or add/remove children.
- The browser re-renders the affected part of the page automatically.
Related terms
Related Resources
Learn the fundamentals
Deepen your understanding with structured lessons on this topic.
Decode error messages
Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.