Selecting an Element

Let’s say you want to change the text color of a <div> from black to red with JavaScript.

How do you begin?

The first step to changing this <div> (or doing anything with the DOM, really) is to select the <div> itself.

Now, this <div> is called an element. To select an element, you can use the querySelector method.

document.querySelector

The document object contains a method called querySelector. It looks like this:

const element = document.querySelector(selector)

selector refers to the id, class, tag, or attribute of the element you want to select. These selectors are written the same way as you would write selectors in CSS:

• To select an element with an id, you prepend it with #
• To select an element with a class, you prepend it with .
• To select an element with a tag, you write the tag name directly (ie. button)
• To select an element with an attribute, you write the attribute in square ([]) brackets

Here are some examples of querySelector at work:

<div id="master-yoda">Yoda</div>
<div class="class-of-assassins">Assassin</div>
<p>The three little pigs</p>
<div data-type="rocket">🚀</div>

document.querySelector('#master-yoda')
// => <div id="master-yoda">Yoda</div>

document.querySelector('.class-of-assassins')
// => <div class="class-of-assassins">Assassin</div>

document.querySelector('p')
// => <p>The three little pigs</p>

document.querySelector('[data-type="rocket"]')
// => <div data-type="rocket">🚀</div>

querySelector returns only one element

querySelector always returns the first element it finds — it doesn’t matter how many elements your selector matches.

In the example below, document.querySelector('li') will return Gandalf.

<ol class="humans">
  <li>Gandalf</li>
  <li>Saruman</li>
  <li>Aragorn</li>
  <li>Boromir</li>
  <li>Faramir</li>
</ol>

const firstHuman = document.querySelector('li')
console.log(firstHuman) // <li>Gandalf</li>

If you want to select multiple elements, you’ll need to use another method called querySelectorAll. You’ll find out more about querySelectorAll in a later lesson.

Complex selectors

You can write complex selectors that combine id, classes, tags and even attributes, but don’t do it — one selector is usually good enough to handle your selection needs.

// DON'T DO THIS
document.querySelector('div#master-yoda')
// => <div id="master-yoda">Yoda</div>

// DO THIS INSTEAD
document.querySelector('#master-yoda')
// => <div id="master-yoda">Yoda</div>

element.querySelector

All elements have the querySelector method too.

This lets you search for an element within another element — so JavaScript doesn’t have to comb through the entire DOM.

Let’s say you have the following HTML.

<ol class="humans">
  <li>Gandalf</li>
  <li>Saruman</li>
  <li>Aragorn</li>
  <li>Boromir</li>
  <li>Faramir</li>
</ol>

One way to get Gandalf is through document.querySelector('li') like you’ve seen above.

const firstHuman = document.querySelector('li')
console.log(firstHuman) // <li>Gandalf</li>

Now if you have selected the list (.humans) and assigned it to a variable, you can begin to search for Gandalf through this variable.

const humans = document.querySelector('.humans')
const firstHuman = humans.querySelector('li')
// => <li>Gandalf</li>

When you use element.querySelector, you’ll write that that’s much easier to read and understand, less prone to bugs, and faster, compared to using document.querySelector all the time.

Exercise

Practice selecting elements with document.querySelector and element.querySelector. Try using ids, classes, tags and attribute selectors as you select from the following HTML.

<ul id="star-wars-characters">
  <li class="character luke" data-type="hero">Luke Skywalker</li>
  <li class="character yoda" data-type="master">Yoda</li>
  <li class="character badboy" data-type="villain">Darth Vader</li>
</ul>

1. Get the #star-wars-characters list with id and tag selectors.
2. From the #star-wars-characters list, get the following:
   1. Luke Skywalker with class, tag and attribute selectors
   2. Yoda with class and attribute selectors
   3. Darth Vader with class and attribute selectors
3. Notice how you can’t select Yoda and Darth Vader with tags when you use querySelector.