The DOM, or Document Object Model, is the browser’s structured representation of a web page. JavaScript running in a browser can use DOM APIs to find page elements, change content or structure, and respond to user actions. The DOM is a browser Web API—not part of the JavaScript language itself—so JavaScript environments such as Node.js do not provide the browser DOM as a core runtime API.
What is the DOM in JavaScript?
MDN Web Docs describes the Document Object Model as “a programming interface for web documents.” When a browser parses an HTML document, it builds a tree-shaped representation of that document. The tree contains nodes: elements such as headings and paragraphs, as well as text and other objects. An element is one kind of node, so the terms are related but not interchangeable.
As an Amazon Associate I earn from qualifying purchases.
The DOM lets code inspect and work with the document as objects and relationships. For example, a paragraph element is a node in the page tree, and its text is represented within that structure. The HTML DOM API provides HTML-specific interfaces on top of the broader DOM model. MDN’s DOM introduction explains the model and its role in web documents.
Free tools Windows power users keep installed
One-click scans. No signup required.
How is the DOM different from JavaScript?
JavaScript is a programming language; the DOM is an API that a browser makes available to scripts. The language can run in different environments, each with its own APIs. Browser code commonly uses globals such as document to interact with the page, but those browser APIs are not built into JavaScript itself.
#1 Best Overall
Node.js has its own runtime APIs and does not include the browser DOM as a core part of the runtime. Consequently, browser code that refers directly to document may fail in Node.js unless a separate library or environment supplies a DOM-like API. Do not assume that code written for a browser can use browser globals everywhere.
How do I select an element with JavaScript?
Use document.querySelector() to find the first element matching a CSS selector. Use document.querySelectorAll() to get all matching elements in a NodeList. The first returns one element or null when there is no match; the second returns a collection, which may be empty.
Rank #2
| Method | What it returns | Use it when |
|---|---|---|
querySelector(selector) |
The first matching element, or null |
You need one target, such as #output |
querySelectorAll(selector) |
A NodeList of all matching elements | You need to work with every match, such as all p elements |
Check that a single-element query found a match before reading or changing the result. You can also call a query on an element rather than on document; that scopes the search to the element’s descendants. See MDN’s querySelector() reference and querySelectorAll() reference.
Recommended Free Tools
How do I change HTML with JavaScript?
After selecting an element, use appropriate DOM properties and methods to read or change its content and state. For a text-only update, textContent replaces the element’s text without interpreting it as HTML:
const heading = document.querySelector("h1");
if (heading) {
heading.textContent = "A new heading";
}For changes to document structure, DOM methods can create, insert, move, or remove nodes. Choose the operation that matches the change you intend rather than treating the page as an undifferentiated string. The MDN DOM introduction includes examples of changing text and document content.
How do JavaScript event listeners work?
An event listener connects an event type, such as click, to a callback function. When the browser dispatches that event for the element, it calls the function and passes an event object containing information about the event. addEventListener() is flexible, permits multiple listeners for an event, and pairs with removeEventListener() when a listener should be removed.
Rank #4
const button = document.querySelector("button");
const output = document.querySelector("#output");
if (button && output) {
button.addEventListener("click", (event) => {
output.textContent = "The button was activated.";
console.log(event.type);
});
}In this example, the callback updates the selected output and logs the event type. The null checks prevent using either target if the corresponding selector finds no element. For more about registering listeners and handling events, see MDN’s addEventListener() reference.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteWhat if the script runs before the page elements exist?
A selector can find only elements that are already present in the document when the query runs. If a script executes before its target markup has been parsed, the query may return null. Place the script after the relevant markup, or wait until the document is ready before querying and attaching listeners. A null check remains useful because the expected element may still be absent or a selector may not match.
Quick Recap
Which DOM concepts should I remember?
- The DOM is a tree-shaped representation of a document made up of nodes; elements are one category of node.
- The DOM is a Web API commonly used by JavaScript in browsers, not a feature of the JavaScript language itself.
querySelector()returns the first match ornull;querySelectorAll()returns a NodeList of matches.- DOM APIs can inspect and change document content, structure, and state.
addEventListener()connects an event to a callback, which receives an event object.- Browser globals such as
documentshould not be assumed to exist in Node.js.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
