JavaScript lesson 22: The web page: finding and changing elements

What your child will learn

Learning goal: find an element on a web page with querySelector.

Success looks like

• I can find an element on a web page with querySelector.
• I can read and change its text with textContent.
• I can explain #id, .class and tag selectors.

Key words

DOM · element · selector · querySelector · textContent · null

What to have ready

• A device with a web browser (the code runs in the browser – nothing to install)
• Paper for tracing
• A keyboard helps for typing code (a tablet or phone works too)

The big ideas (for the adult)

A web page is made of elements, like <p id="msg">Hello</p>. JavaScript sees the page as the DOM – the Document Object Model – and can find and change any element.

document.querySelector("#msg") finds the first element with id="msg". ".note" finds by class, and a plain word like "li" finds by tag. querySelectorAll finds them all. If nothing matches, you get null.

el.textContent is the element's text. el.textContent = "Bye" REPLACES it; += adds to it.

Worked example – see it

// <h1 id="title">Our trip</h1>
// <p id="msg" class="note">Hello Ben</p>
// <ul id="list"><li>rabbit</li><li class="star">cat</li><li>frog</li></ul>
// <button id="go">Click me</button>

const items = document.querySelectorAll("li")
console.log(items.length)

It prints:

3

The lesson, step by step