WEBVTT

00:00:02.084 --> 00:00:06.101
You've now got a lot of tools
in your toolbox for finding elements.

00:00:06.101 --> 00:00:08.645
And those will work great
a lot of the time.

00:00:08.645 --> 00:00:12.492
But there is one final tool
that's the most powerful of them all:

00:00:12.492 --> 00:00:18.070
the ability to find elements
based on any CSS selector.

00:00:18.070 --> 00:00:20.384
Do you remember CSS selectors?

00:00:20.384 --> 00:00:24.562
The basic ones were
finding by tag name,

00:00:24.562 --> 00:00:26.170
or ID

00:00:26.170 --> 00:00:27.518
or class

00:00:27.518 --> 00:00:30.027
But there are many
more advanced selectors:

00:00:30.027 --> 00:00:35.333
descendant selectors, attribute selectors,
combined class plus element selectors--

00:00:35.333 --> 00:00:38.547
this would be a good time
for you to review CSS selectors

00:00:38.547 --> 00:00:40.643
if you've forgotten all of those.

00:00:40.643 --> 00:00:45.642
For example, what if I wanted
to specifically style only the elements

00:00:45.642 --> 00:00:50.765
with class name "animal"
that are inside a paragraph?

00:00:50.765 --> 00:00:54.606
Let's stick a `` tag in
and do that.

00:00:54.606 --> 00:00:57.124
So I would first write `p`,

00:00:57.124 --> 00:01:01.532
and then a space, to say that
I'm looking inside ``s,

00:01:01.532 --> 00:01:06.492
and then dot animal to say that
I'm looking for any elements

00:01:06.492 --> 00:01:09.603
with class name "animal".

00:01:09.603 --> 00:01:12.671
And I'll just color them red.

00:01:12.671 --> 00:01:14.130
Beautiful.

00:01:14.130 --> 00:01:19.665
Now, I could use the same CSS selector
to find those elements in JavaScript,

00:01:19.665 --> 00:01:24.944
using the
`document.querySelectorAll()` method.

00:01:24.944 --> 00:01:30.323
So I'll change this line here.

00:01:30.323 --> 00:01:35.377
And I need to pass the CSS selector
as the argument,

00:01:35.377 --> 00:01:38.392
as a string in quotes.

00:01:38.392 --> 00:01:42.486
And there, the paragraph
is about cats again.

00:01:42.486 --> 00:01:45.823
You could pass any valid
CSS selector to that function,

00:01:45.823 --> 00:01:48.414
and it will return back
a collection of elements

00:01:48.414 --> 00:01:50.883
that you can then loop through.

00:01:50.883 --> 00:01:53.507
Do you remember last time
how we said

00:01:53.507 --> 00:01:57.617
that `getElementsByTagName()`
returns an HTML collection

00:01:57.617 --> 00:01:59.998
that looks a lot like an array?

00:01:59.998 --> 00:02:06.710
Well this method returns a `NodeList`,
which is also a lot like an array,

00:02:06.710 --> 00:02:12.530
in that we can use the brackets on it,
we can check the length, all of that.

00:02:12.530 --> 00:02:16.282
And you probably won't run into
the differences between

00:02:16.282 --> 00:02:20.029
a NodeList and an HTMLCollection
when you're using these methods.

00:02:20.029 --> 00:02:24.375
But you are welcome to look them up
if you'd like to learn more about them.

00:02:24.375 --> 00:02:28.924
Okay, now, there's also a method
that will look up CSS selectors,

00:02:28.924 --> 00:02:32.782
and return only one element,
if you know your CSS selector

00:02:32.782 --> 00:02:35.061
is only selecting one thing.

00:02:35.061 --> 00:02:37.409
In practice, it's not really as useful,



00:02:37.409 --> 00:02:40.458
because you usually have
an ID that you can use in that case.

00:02:40.458 --> 00:02:43.079
But I'll show it to you just in case.

00:02:43.079 --> 00:02:46.310
So here, instead of `getElementById`,
I could actually say:

00:02:46.310 --> 00:02:48.577
`document.querySelector("`

00:02:48.577 --> 00:02:53.565
and then for the actual query,
to make it be an ID, I just add that hash.

00:02:53.565 --> 00:02:54.520
Ta-da.

00:02:54.520 --> 00:02:57.917
So, as you see, this is really similar
to `querySelectorAll()`,

00:02:57.917 --> 00:03:01.547
except we're only selecting one,
so it's just `querySelector()`,

00:03:01.547 --> 00:03:06.510
and we just pass in some CSS selector
that we expect to get back one element.

00:03:06.510 --> 00:03:10.434
So when should you use
each of these tools in your toolbox?

00:03:10.434 --> 00:03:13.702
The first ones that I showed you
tend to perform better.

00:03:13.702 --> 00:03:15.734
So I suggest using those when you can.

00:03:15.734 --> 00:03:19.587
But if you're in a situation where
you need to use a complex CSS selector,

00:03:19.587 --> 00:03:24.053
and you can't use those,
then `querySelectorAll()` is your friend.

00:03:24.053 --> 00:03:26.109
Try it out in the next challenge,

00:03:26.109 --> 00:03:31.273
then get ready to see way more ways
that you can manipulate this webpage.