Selecting an Element

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

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?

Your first step to change this <div> (or do anything with the DOM, really) is to select the <div> itself. 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

It doesn’t matter how many elements your selector matches; querySelector always returns the first element it finds. 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. It lets you search for an element within another element. You’d want to use this method to search for an inner element since it’s faster than combing through the entire DOM (assuming you already have the outer element).

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>

Another way to get Gandalf is through the <ol>. To do so, you perform a search for the outer element first, followed by a search for the inner element.

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

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.