Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
JavaScript  ›  Lesson

The DOM — Changing the Page

JavaScript 14 minScripts find elements in the DOM with querySelector or querySelectorAll using CSS selectors, then change their text, classes and attributes or add new elements.

The DOM — Changing the Page

The bakery's rye sells out by noon. Instead of editing the HTML file each day, a script should mark it "Sold out" on the page. In the browser lesson you met the DOM, the tree the browser builds from your HTML. JavaScript changes what visitors see by changing that tree.

The rule

Find the element, then change it.

Finding elements. The document object is your way into the tree. Two methods cover most needs, and both take a CSS selector, so everything from the CSS section carries over:

const heading = document.querySelector("h1");          // first match, or null
const rye = document.querySelector("#rye");
const cards = document.querySelectorAll(".card");       // every match
  • querySelector returns the first matching element, or null if nothing matches.
  • querySelectorAll returns a NodeList of every match, which you can loop over with for...of or forEach. If nothing matches, the list is empty.

Changing elements. Once you hold an element, you can change it:

rye.querySelector(".status").textContent = "Sold out";
rye.classList.add("sold-out");
rye.querySelector("button").disabled = true;
  • textContent reads or replaces the text inside an element.
  • classList.add, remove and toggle switch classes, so CSS stays in charge of the looks.
  • Attributes and properties such as disabled, src and href can be set directly.

Creating elements. Build a new node, fill it, then attach it:

const item = document.createElement("li");
item.textContent = "Rye loaf × 1";
document.querySelector("#basket").append(item);

A word on innerHTML: it replaces an element's contents with a string parsed as HTML. It is handy for trusted markup, but if any part of that string came from a user (a name typed into a form, say), a crafted value can inject a script into your page. For text, use textContent, which never interprets HTML.

The shortcut

Say every DOM task as two verbs: "find ___, then ___ it." The first half becomes a querySelector with a CSS selector. The second half becomes a property or method: text, class, attribute, or append.

Marking the rye as sold outStep 1 of 4

  1. Find

    "Find the card with id rye": document.querySelector("#rye").

The trap is running this script before the HTML has been parsed. querySelector then finds nothing and returns null. Loading scripts with defer avoids it.

Drills

Answer fast — trust the rule.

quick drill

The page has five .card elements. What does document.querySelector(".card") return?

quick drill

What does document.querySelector("#croissant") return when no element has that id?

quick drill

A customer types their name, which the page shows in a greeting. Which is the safe choice?

quick drill

What is the best way to make a sold-out card look grey?

Remember

  • Find the element, then change it.
  • Say it as "find ___, then ___ it": a selector, then a property or method.
  • Trap: querySelector returns null when nothing matches; use textContent, not innerHTML, for user text.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainMarking an item sold out

Write the code to mark the rye loaf card (id="rye") as sold out: change its status text, add a sold-out class and disable its button. Explain each step, what happens if the id is misspelled, and why textContent is preferred over innerHTML for text.