Find and change page elements with the DOM

One idea at a time

The browser parses HTML into a tree of nodes called the Document Object Model, or DOM. A node is one part of that tree, such as an element or a piece of text. JavaScript can read and change that tree through document. The HTML file is your starting source; changing the DOM updates the current page in memory, not the saved file on disk. Reloading starts again from the file.

A selector finds an existing element. document.querySelector accepts a CSS selector and returns the first match, or null when nothing matches. Match the spelling and capitalization of the HTML id. Use an external deferred script so the elements exist before your code runs. Finding an element does not automatically change it.

What to remember first

Walk through an example

<h2 id="heading">My notebook</h2>
<ul id="topics"></ul>

const heading = document.querySelector("#heading");
heading.textContent = "Topics to explore";
const list = document.querySelector("#topics");
const item = document.createElement("li");
item.textContent = "JavaScript";
list.append(item);

The h2 and ul already exist. The first two statements change the h2 text. createElement makes a new li, textContent gives it a label, and append places it inside the list. Without append, the item exists only as a detached object and is not visible in the document.

See it happen: try a small change

document.querySelector("#heading").textContent = "Topics to explore";
const item = document.createElement("li");
item.textContent = "JavaScript";
document.querySelector("#topics").append(item);

Look a little closer

A selection can fail without throwing: querySelector returns null. Trying to set textContent on that null value fails afterward. Check the selector, the HTML, and script timing. In code where an element is optional, test whether it exists before using it; do not silently hide a missing required element while debugging.

querySelectorAll returns a NodeList, a collection of nodes. Static means its membership is a snapshot taken when the selection runs, rather than a live list. You can visit its elements with for...of, just as you visited array values. The collection will not automatically gain nodes you create later. textContent includes text without checking layout, whereas innerText considers rendered text. For these straightforward updates, textContent keeps the behavior predictable.

Try it in your own project

Put the supplied h2 and empty ul in body and keep the deferred script link in head. Use two distinct li objects for two books; appending the same node again moves it rather than making a copy. Reload to verify the script rebuilds exactly two items.

The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.

A common wrong turn

Using a class selector with #, omitting # for an id in querySelector, or running before the markup exists can all produce no match. Changing a value in your script also does not refresh the DOM by itself; explicitly assign the new text when you want it displayed.

Go to the source

• MDN: Find and change page elements with the DOM ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.