VisaSpark
Sign in
beginner24 min

DOM Selection and Updates

Find elements on a page with JavaScript and change what they show.

What you'll learn

  • Select elements with querySelector and querySelectorAll
  • Read and update an element's text content and classes
  • Create and insert new elements into the page

Prerequisites

Explanation

As covered in the foundations track, the browser builds an in-memory tree of your page called the DOM. JavaScript can read and change that tree after the page loads — that's what makes a page interactive instead of static.

The most common way to find an element is querySelector, which takes a CSS selector (the same kind you write in a stylesheet) and returns the first match:

const heading = document.querySelector("h1");
const firstButton = document.querySelector(".card button");

querySelectorAll returns every match, as a static list you can loop over with for...of or convert to an array.

Once you have an element, you can read or change it:

  • textContent gets/sets the plain text inside an element
  • classList.add/remove/toggle adds, removes, or flips a CSS class
  • style lets you set individual inline CSS properties directly (used sparingly — a CSS class is usually cleaner)
heading.textContent = "Updated heading";
heading.classList.add("highlighted");

You can also build brand-new elements and insert them:

const item = document.createElement("li");
item.textContent = "New item";
document.querySelector("ul").appendChild(item);

This pattern — select or create, then modify, then insert — is the foundation of every dynamic web page, from a to-do list to a live dashboard.

Example

Selecting a heading and a list, then updating and adding to them.

<!doctype html>
<html>
  <body>
    <h1 id="title">Original title</h1>
    <ul id="list">
      <li>First item</li>
    </ul>
    <script>
      document.querySelector("#title").textContent = "Updated by JavaScript";

      const newItem = document.createElement("li");
      newItem.textContent = "Second item";
      document.querySelector("#list").appendChild(newItem);
    </script>
  </body>
</html>

Try it yourself

Add a third list item using createElement and appendChild.

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Guided exercise

Guided exercise

Select the element with id 'message' and set its textContent to 'Loaded!'. Then add the CSS class 'ready' to it using classList.

Checks: #message text updated to 'Loaded!' · #message has the 'ready' class

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Independent exercise

Independent exercise

Given an empty <ul id='items'>, use JavaScript to add exactly three <li> elements to it with the text 'One', 'Two', and 'Three', in that order.

Checks: Exactly three <li> elements added · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Common mistakes

  • Running a script before the elements it selects exist in the page, resulting in null.
  • Forgetting that querySelector returns only the first match, while querySelectorAll returns all of them.
  • Using innerHTML with untrusted text, which can introduce injected markup — textContent is safer for plain text.

Knowledge check

Knowledge check

1. What does document.querySelector('.card') return if no element has that class?
2. Which method adds a CSS class to an element without removing existing ones?
3. What is the correct order to insert a brand-new element into the page?

Takeaway

querySelector finds elements, and textContent/classList/createElement let you change or grow the page from there.

Summary

querySelector/querySelectorAll locate elements using CSS selectors. textContent and classList update what an element shows and how it's styled, and createElement plus appendChild build and insert brand-new elements.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Events and Forms →