Accessing HTML Elements

The Big Idea

Before JavaScript can change anything on a page, it needs to find the right element. The querySelector and querySelectorAll methods let you grab any element using the same selectors you already know from CSS.

Your Roadmap

Section	Time	Required?
Set up the practice page	5 min	⚑ Required
querySelector	10 min	⚑ Required
querySelectorAll	10 min	⚑ Required
Selecting by class and id	10 min	⚑ Required

Set up the practice page

For the rest of the DOM lessons you will experiment with commands in the Chrome DevTools console.

Step 1: Create a new file

Create a file on your computer called dom-lesson.html.

Step 2: Paste in this HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="app">
      <header>
        <h1>My test page</h1>
      </header>
      <main>
        <p>
          That said, if you just can't help yourself, there's a
          <a
            id="w3schools-tutorial"
            href="http://www.w3schools.com/js/js_htmldom.asp"
          >
            W3Schools HTML DOM tutorial
          </a>
          you can check out.
        </p>
        <p>
          Be aware, however, that the
          <span class="dom">HTML DOM</span>
          is not the only document object model out there, so make sure it's the
          <span class="dom">HTML DOM</span>
          that you're
          <a href="http://bit.ly/1MEVufu">looking for</a>.
        </p>
      </main>
    </div>
  </body>
</html>

Step 3: Open it in Chrome

Mac: Right-click the file in Finder and select Open With → Google Chrome.

Windows: Right-click the file in File Explorer and select Open With → Google Chrome.

Then open the DevTools console with Command+Option+J (Mac) or Control+Shift+J (Windows/Linux).

querySelector

document.querySelector() returns the first element that matches your selector.

Try grabbing the <h1>:

document.querySelector('h1')

using querySelector('h1') — **Figure 3:** querySelector('h1') returns the first matching element.

Now try grabbing a paragraph:

document.querySelector('p')

using querySelector('p') — **Figure 4:** Only one paragraph is returned — querySelector always returns the first match.

There are two <p> elements on the page, but querySelector only returns the first one. To get all of them, use querySelectorAll.

querySelectorAll

document.querySelectorAll() returns all elements that match your selector, as a NodeList.

document.querySelectorAll('p')

A NodeList looks like an array, but it is not one. You can loop through it with a for loop — you will see this in the next section.

Selecting by class and id

Use . for class selectors and # for id selectors — exactly like CSS.

Goal	Selector
First element with id `w3schools-tutorial`	`document.querySelector('#w3schools-tutorial')`
First `<a>` with id `w3schools-tutorial`	`document.querySelector('a#w3schools-tutorial')`
All elements with class `dom`	`document.querySelectorAll('.dom')`

When to use id vs class:

Use id selectors in JavaScript — finding one element by id is fast and unambiguous
Use class selectors when you want to target a group of elements at once
Reserve classes for CSS styling; reserve ids for JavaScript targeting

How to know you've nailed it

	Level	You can...
🪨	Intro Climb	Use `querySelector` to grab an element by tag name and see it in the console	⚑ Required
🧗	Core Ascent	Explain the difference between `querySelector` and `querySelectorAll`, and select elements by class and id	⚑ Required
🏔️	Summit	Combine tag and class/id selectors (e.g. `a#w3schools-tutorial`) and explain what each part does	◎ Optional

The Big Idea (revisited)

querySelector grabs the first matching element. querySelectorAll grabs all of them. Use CSS-style selectors — tag names, .class, #id — to target exactly what you need.

Intro to the DOM

Using HTML Elements