Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
querySelector() and querySelectorAll() are the most flexible of all the DOM selector methods. They accept ID's, classes, tag names, and just about any valid CSS selector.
Further Reading
- Locating DOM elements using selectors
- querySelector() – MDN
- querySelectorAll() – MDN
- CSS selectors – MDN
HTMLCollection and NodeList
CSS Selectors
CSS selectors target the HTML elements on our web pages that we want to style. If you'd like to learn more about CSS selectors, including pseudo-class selectors, review the CSS Selectors course on Treehouse.
Example Selectors
Descendant selector
The following targets all anchor tags that are nested inside a nav element.
const navigationLinks = document.querySelectorAll('nav a');
Attribute selector
The following targets an input element that's: <input type="submit">. Input elements of type submit are rendered as buttons.
const btnSubmit = document.querySelector("input[type='submit']");
Pseudo-class
The following selects the "odd" <li> elements in a list: 1, 3, 5, etc.
const itemsOdd = document.querySelectorAll("li:nth-child(odd)");
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The last selectors we'll look at
are querySelector and querySelectorAll.
0:00
These are the most flexible
of all the DOM selectors.
0:05
They accept IDs, classes, tag names,
and just about any valid CSS selector.
0:09
They specifically work well with
descendant and attribute selectors, for
0:14
example.
0:18
The querySelector method returns the first
element that matches the specified
0:19
selector.
0:24
And querySelectorAll returns
a collection of all elements or
0:25
nodes matching the given selector.
0:30
I'll teach you how these selection methods
work in the browser console first.
0:33
I'll start by selecting a button
element with document.querySelector and
0:38
pass it the button tag name as a string.
0:46
Even though there are multiple
button elements in the document,
0:49
the browser only returns
the first one it finds.
0:53
This selection method is flexible,
so I can be more specific
0:57
by passing it the class or
ID of the element I want to select.
1:00
For example,
the button with the class btn-toggle.
1:04
Remember, when using querySelector and
querySelectorAll,
1:11
you need to specify the selector
as you'd write it in CSS.
1:16
This means adding a dot character
when selecting a class,
1:20
and the hash or pound sign when
targeting an ID, like headline.
1:26
Otherwise, the methods will return null or
1:32
throw an exception or
error in the console.
1:35
Next, I'll select all the li elements in
1:38
the document using
document.querySelectorAll and
1:43
pass it the li tag name as a string.
1:48
Let's see what this returns.
1:53
This time we get something
called a NodeList.
1:55
And like an HTMLCollection, it resembles
an array holding all the li tag names
1:58
And if we pass
the querySelectorAll method,
2:07
the class highlight,
it selects and returns a NodeList
2:11
containing just the list items
with the class highlight.
2:16
A NodeList and
an HTMLCollection are very similar.
2:21
They're both array-like collections of
DOM nodes in the order they appear on
2:26
the page.
2:30
The distinction between the two is not
super important to know right now,
2:31
but in short, a NodeList is more
flexible than an HTMLCollection.
2:36
It can contain any type of DOM node.
2:40
For example, a NodeList can contain
element nodes and text nodes.
2:43
You can also iterate through a NodeList
in the same way you would an array,
2:48
using a for loop, for of, and other
array iteration methods, like map and
2:53
forEach, which you may not have used yet.
2:58
However, an HTMLCollection can
contain HTML elements only and
3:01
you can't loop over it exactly
as you would an array.
3:05
You don't need to worry about what
all this means in this course, but
3:09
I've posted resources in the teacher's
notes if you want to learn more.
3:12
The main difference to remember
between an HTMLCollection and
3:16
a NodeList is that HTML collection
is a live data structure and
3:21
NodeList is a static data structure.
3:26
An HTMLCollection automatically updates
each time it detects a change in
3:29
the items retrieved by a method.
3:34
A NodeList remains the same, no matter
the changes that occur in your HTML.
3:36
In other words, every time a new
element gets appended to the DOM,
3:41
with JavaScript for example,
3:45
an HTMLCollection will recognize the new
element, while a NodeList will not.
3:47
Okay, so we know that querySelector
returns the first matching
3:53
element only and
that querySelectorAll returns a NodeList
3:58
holding all elements
matching the selector.
4:02
Let's now jump over to app.js and
4:06
replace getElementsByTagName
here in the items
4:09
variable declaration
with querySelectorAll.
4:14
And just below,
replace the getElementsByClassName method
4:20
assigned to the highlights
variable with querySelectorAll,
4:24
making sure that we update
the string passed to this method to
4:29
.highlight since we're targeting a class.
4:34
And to get more practice
with document.querySelector,
4:38
I'll change the ID of this first
button element to a class.
4:43
Then in my JavaScript,
4:48
change the selection
method from getElementById
4:51
to querySelector('.btn-main').
4:57
I'll save my file and
refresh the browser to make sure
5:02
that everything works as expected,
and it does.
5:07
As you can see, these DOM selection
methods are really powerful and flexible.
5:12
You've learned various ways to select
elements so far, and in some cases,
5:21
different ways to make
the same selections.
5:26
You may be wondering,
5:28
how do I know I'm using the right
tool to select the right elements?
5:30
Good question.
5:33
Part of the answer is going
to be shaped by your HTML.
5:34
Are there IDs on the elements
you want to select?
5:38
Do you want to select all elements
with a given tag or class name?
5:41
Or perhaps you want your selection methods
to be more flexible, accepting IDs,
5:45
classes, tag names, and
other CSS selectors?
5:50
Keep in mind that some methods
return the first matching element,
5:52
while others return a collection or
list of all matching elements.
5:56
It's a lot of information
to keep track of, so
6:01
I've provided resources to help you
evaluate the tools you wish to use for
6:03
your projects in the teacher's
notes with this video.
6:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up