DOM
Document Object Model
- Pronunciation
- DAHM
In short
The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.
What is the DOM?
When a browser loads an HTML document, it parses the text into a tree of objects called the Document Object Model. Each element, attribute, and piece of text becomes a node in that tree, with parent, child, and sibling relationships that mirror the nesting in the HTML.
The DOM is an API as well as a data structure. JavaScript can use methods like document.querySelector() to find nodes, change their text or attributes, add or remove elements, and listen for events such as clicks and key presses. When the DOM changes, the browser updates the screen to match.
A helpful analogy is a family tree: the <html> element is the ancestor, <head> and <body> are its children, and every nested element is a descendant. Editing one node is like updating a single branch without redrawing the whole tree.
The DOM is not the same as your HTML source code. The source is the original text sent by the server, while the DOM is the live, current state of the page after scripts have run, which is why browser developer tools can show elements that View Source does not. Frameworks like React use a virtual DOM, an in-memory copy, to work out the smallest set of real DOM changes needed.
At a glance
Key takeaways
- The DOM represents a page as a tree of nodes.
- JavaScript uses DOM APIs to read and modify the page.
- Changes to the DOM are reflected on screen.
- The DOM is the live page state, not the original HTML text.
- A virtual DOM is a framework technique, not part of the browser.
Example
// Find the existing <ul id="todo"> element
const list = document.querySelector("#todo");
// Create a new <li> node and set its text
const item = document.createElement("li");
item.textContent = "Buy milk";
// Insert it into the tree; the page updates immediately
list.append(item);Readers ask
Is the DOM part of JavaScript?
No. The DOM is a web standard implemented by browsers, and JavaScript is the language most often used to access it. Outside the browser, for example in Node.js, there is no DOM unless a library provides one.
What is the virtual DOM?
The virtual DOM is a lightweight copy of the page structure kept in memory by some UI frameworks. The framework compares the old and new versions and then applies only the necessary changes to the real DOM.
What is the difference between the DOM and HTML?
HTML is the text markup a server sends, while the DOM is the object tree the browser builds from it. Scripts can change the DOM after loading, so the two can differ.
Often compared
See also
- HTMLWeb Development, p. 18HTML is the markup language that defines the structure and content of web pages, such as headings, paragraphs, links, images, and forms.
- JavaScriptWeb Development, p. 24JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
- CSSWeb Development, p. 10CSS is the style sheet language that controls how HTML content looks on screen, including colors, fonts, spacing, layout, and animations.
- SPAWeb Development, p. 41An SPA is a web application that loads a single HTML page and then updates content with JavaScript, so moving between views does not reload the page.
- APIBackend & APIs, p. 2An API is a set of rules that lets one piece of software request data or actions from another in a predictable, documented way.
- ReactWeb Development, p. 36React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
- jQueryWeb Development, p. 25jQuery is a JavaScript library that made selecting elements, handling events, animating and making AJAX requests easy with one short, cross-browser syntax.
Sources
Spotted a mistake or something missing on this page?Suggest an edit