Selecting and Changing the Page: querySelector, textContent, and classList

The previous lesson put values in the console. This lesson puts a line under your name on the page itself. You add an empty tagline, select it with querySelector, fill it with textContent, and mark it with classList so your CSS can style the change.

The concept

Here is your page as the previous lesson left it. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row">
          <li class="skill-card">HTML</li>
          <li class="skill-card">CSS</li>
          <li class="skill-card">JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      const pageOwner = "Your Name";
      const skillCount = 3;
      console.log(pageOwner);
      console.log(skillCount);
      // Add an empty tagline, then select and change it.
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

The CONSOLE may still show the two values from the previous lesson. There is no tagline under the name yet. You will add an empty one in this lesson, then JavaScript will fill it.

Run this tiny page and watch the preview, not only the console:

THE PREVIEW CHANGES · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The heading said Before. After Run it says After. No one edited the HTML by hand between those two states. The script found the h1 and replaced its text.

Finding an element on the page is document.querySelector(...). The string inside is a CSS selector, the same shape you already use in stylesheets: "h1", ".tagline", "#about".

document is the page. querySelector returns the first element that matches, or null when nothing matches.

Now fill a tagline under a name:

TEXT UNDER THE NAME · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The paragraph under the name shows Building things for the web. That string was assigned to textContent, the text the visitor reads inside the element.

Mark the tagline so CSS can treat it as set:

A CLASS MARKS THE CHANGE · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The text turns teal and a little heavier. The script called classList.add("is-set"). Your stylesheet already had .tagline.is-set. JavaScript attached the class name. CSS did the look.

The syntax

Keep the <script> at the end of <body>, after the elements you will select:

<body>
  <h1>Your Name</h1>
  <p class="tagline"></p>
  <script>
    const tagline = document.querySelector(".tagline");
    tagline.textContent = "Building things for the web";
    tagline.classList.add("is-set");
  </script>
</body>

document.querySelector(selector) finds one element.

element.textContent = "..." sets the visible text of that element.

element.classList.add("name") adds a class to the element so existing CSS can apply.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tagline</title>
    <style>
      .tagline.is-set {
        color: teal;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h1>Your Name</h1>
    <p class="tagline"></p>
    <script>
      const tagline = document.querySelector(".tagline");
      tagline.textContent = "Building things for the web";
      tagline.classList.add("is-set");
    </script>
  </body>
</html>

One empty tagline in the markup. One script at the end of the body. Text and a class, both applied in JavaScript.

Common mistakes

You mistype the selector, so nothing matches. You write document.querySelector(".taglien") while the HTML says class="tagline". querySelector returns null. The next line that sets textContent fails. The CONSOLE shows a red TypeError mentioning null. The preview does not change. Check the class or id spelling against the HTML before blaming textContent.

You put the <script> in <head>, before the elements exist. Run this:

SCRIPT IN THE HEAD FINDS NOTHING · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The heading still says Still the original. The CONSOLE shows a red TypeError about null. The script ran while the browser was still in the head. The h1 was not on the page yet, so querySelector("h1") returned null. Setting textContent on null throws a TypeError. This trips up almost everyone the first time they move a script. Keep the script at the end of <body>, where your starter already puts it.

You set textContent and expect a class style to appear on its own. Text updates. Colour and weight come from CSS. If you want .is-set styles, you still need classList.add("is-set") (or the class present in the HTML from the start).

Try it yourself

Your profile page needs an empty tagline under the name, then JavaScript to fill it. Confirm each step in the preview.

Run the starting code below. Confirm the preview shows your styled profile page. Confirm the CONSOLE still shows your two values from the previous lesson.
Under the <h1> in index.html, add <p class="tagline"></p>. In styles.css, add .tagline { color: #555555; margin-top: 0.25rem; margin-bottom: 1rem; } and .tagline.is-set { color: teal; font-weight: 600; }. Run it. Confirm an empty space under the name where the tagline will go.
Below the comment in the <script> (or after your existing console lines), add const tagline = document.querySelector(".tagline");. On the next line, set tagline.textContent = "Building things for the web"; (use any short line about you). Run it. Confirm that sentence appears under your name in the preview.
Add tagline.classList.add("is-set");. Run it. Confirm the tagline turns teal and a little heavier, matching .tagline.is-set in styles.css.
Break it on purpose: change the selector to ".taglien" (wrong spelling). Run it. Confirm the tagline text disappears or never updates, and the CONSOLE shows a red TypeError mentioning null.
Fix it: put ".tagline" back. Run it. Confirm the tagline text and teal styling both return.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Your page now has a tagline written by JavaScript under your name. The next lesson wraps that logic in a function so you can reuse it without copying the same lines.