Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The DOM is the browser’s structured, in-memory representation of a web document. JavaScript can use DOM APIs to find elements, change page content or structure, and respond to user actions. The DOM is not part of JavaScript itself: it is a browser Web API, and JavaScript environments such as Node.js do not provide the browser DOM as a core runtime API.
What is the DOM in JavaScript?
The Document Object Model (DOM) is a programming interface for web documents. When a browser parses HTML, it represents the document as a logical tree of nodes. A heading, paragraph, or button is an element node; text within an element is represented by a text node. “Node” is the general term, while “element” refers specifically to an element in that tree.
JavaScript can interact with this representation through DOM methods and properties. For example, a script can locate a heading, replace its text, or add an event handler to a button. These operations affect the document the browser represents; they do not change the JavaScript language itself. See MDN’s introduction to the DOM.
How is the DOM different from JavaScript?
JavaScript is a programming language. The DOM is one of the APIs that a browser makes available to JavaScript. The distinction matters because JavaScript can also run in environments that do not provide browser APIs. Node.js, for example, has its own runtime APIs and does not include the browser DOM as a core API.
#1 Best Overall
HTML-specific interfaces, such as those for working with HTML documents and elements, build on the broader DOM model. As a result, browser code can use JavaScript language features alongside browser-provided objects such as document. Do not assume that document or other browser globals exist in every JavaScript environment. For the HTML-specific API, see MDN’s HTML DOM API reference.
How do I select an element with JavaScript?
Use document.querySelector() to find the first element that matches a CSS selector. Use document.querySelectorAll() to get all matching elements in a NodeList. A single result and a collection are different shapes: check a single result before accessing it, and iterate over a collection when you want to process each match.
Rank #2
const heading = document.querySelector("h1");
const paragraphs = document.querySelectorAll("p");
if (heading) {
console.log(heading.textContent);
}
paragraphs.forEach((paragraph) => {
console.log(paragraph.textContent);
});Selectors can also be scoped to an element. Calling container.querySelector(".notice"), for example, searches within that element’s descendants rather than starting from the whole document. See MDN’s querySelector() reference and its querySelectorAll() reference.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How do I change HTML with JavaScript?
After selecting an element, use an appropriate property or method to change its content or state. For plain text, textContent is a straightforward choice. DOM APIs can also create, insert, move, and remove nodes when you need to change document structure. Use the property that matches the intended change rather than treating every update as a string replacement of the entire page.
const status = document.querySelector("#status");
if (status) {
status.textContent = "Your changes have been saved.";
}DOM changes update the document represented in the current page. They do not, by themselves, rewrite the original HTML file on the server. For more on working with HTML through the DOM, see MDN’s HTML DOM API reference.
How do JavaScript event listeners work?
Use addEventListener() to connect an event type, such as click, to a callback function. When the event occurs, the browser calls the callback and passes it an event object containing information about that event. An element can have multiple event listeners, and removeEventListener() can remove a listener when it is no longer needed.
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);
});
}Assigning a handler directly to an event property, such as button.onclick, is another option, but it allows only one assigned handler at a time. addEventListener() is more flexible when multiple listeners or explicit cleanup are useful. Read MDN’s addEventListener() reference for details.
What if a selector returns null?
A query can return no match if the selector does not correspond to an element in the document. It can also run before the browser has parsed the target markup. Check the result before using it, as in the examples above. If the script is running too early, place it after the relevant markup or wait until the document is ready before querying for elements. A selector that succeeds in one document is not guaranteed to match another.
Quick Recap
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.
