0:00:02.084,0:00:06.101
You've now got a lot of tools[br]in your toolbox for finding elements.

0:00:06.101,0:00:08.645
And those will work great[br]a lot of the time.

0:00:08.645,0:00:12.492
But there is one final tool[br]that's the most powerful of them all:

0:00:12.492,0:00:18.070
the ability to find elements[br]based on any CSS selector.

0:00:18.070,0:00:20.384
Do you remember CSS selectors?

0:00:20.384,0:00:24.562
The basic ones were[br]finding by tag name,

0:00:24.562,0:00:26.170
or ID

0:00:26.170,0:00:27.518
or class

0:00:27.518,0:00:30.027
But there are many[br]more advanced selectors:

0:00:30.027,0:00:35.333
descendant selectors, attribute selectors,[br]combined class plus element selectors--

0:00:35.333,0:00:38.547
this would be a good time[br]for you to review CSS selectors

0:00:38.547,0:00:40.643
if you've forgotten all of those.

0:00:40.643,0:00:45.642
For example, what if I wanted[br]to specifically style only the elements

0:00:45.642,0:00:50.765
with class name "animal"[br]that are inside a paragraph?

0:00:50.765,0:00:54.606
Let's stick a `` tag in[br]and do that.

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

0:00:57.124,0:01:01.532
and then a space, to say that[br]I'm looking inside ``s,

0:01:01.532,0:01:06.492
and then dot animal to say that[br]I'm looking for any elements

0:01:06.492,0:01:09.603
with class name "animal".

0:01:09.603,0:01:12.671
And I'll just color them red.

0:01:12.671,0:01:14.130
Beautiful.

0:01:14.130,0:01:19.665
Now, I could use the same CSS selector[br]to find those elements in JavaScript,

0:01:19.665,0:01:24.944
using the[br]`document.querySelectorAll()` method.

0:01:24.944,0:01:30.323
So I'll change this line here.

0:01:30.323,0:01:35.377
And I need to pass the CSS selector[br]as the argument,

0:01:35.377,0:01:38.392
as a string in quotes.

0:01:38.392,0:01:42.486
And there, the paragraph[br]is about cats again.

0:01:42.486,0:01:45.823
You could pass any valid[br]CSS selector to that function,

0:01:45.823,0:01:48.414
and it will return back[br]a collection of elements

0:01:48.414,0:01:50.883
that you can then loop through.

0:01:50.883,0:01:53.507
Do you remember last time[br]how we said

0:01:53.507,0:01:57.617
that `getElementsByTagName()`[br]returns an HTML collection

0:01:57.617,0:01:59.998
that looks a lot like an array?

0:01:59.998,0:02:06.710
Well this method returns a `NodeList`,[br]which is also a lot like an array,

0:02:06.710,0:02:12.530
in that we can use the brackets on it,[br]we can check the length, all of that.

0:02:12.530,0:02:16.282
And you probably won't run into[br]the differences between

0:02:16.282,0:02:20.029
a NodeList and an HTMLCollection[br]when you're using these methods.

0:02:20.029,0:02:24.375
But you are welcome to look them up[br]if you'd like to learn more about them.

0:02:24.375,0:02:28.924
Okay, now, there's also a method[br]that will look up CSS selectors,

0:02:28.924,0:02:32.782
and return only one element,[br]if you know your CSS selector

0:02:32.782,0:02:35.061
is only selecting one thing.

0:02:35.061,0:02:37.409
In practice, it's not really as useful,[br][br]

0:02:37.409,0:02:40.458
because you usually have[br]an ID that you can use in that case.

0:02:40.458,0:02:43.079
But I'll show it to you just in case.

0:02:43.079,0:02:46.310
So here, instead of `getElementById`,[br]I could actually say:

0:02:46.310,0:02:48.577
`document.querySelector("`

0:02:48.577,0:02:53.565
and then for the actual query,[br]to make it be an ID, I just add that hash.

0:02:53.565,0:02:54.520
Ta-da.

0:02:54.520,0:02:57.917
So, as you see, this is really similar[br]to `querySelectorAll()`,

0:02:57.917,0:03:01.547
except we're only selecting one,[br]so it's just `querySelector()`,

0:03:01.547,0:03:06.510
and we just pass in some CSS selector[br]that we expect to get back one element.

0:03:06.510,0:03:10.434
So when should you use[br]each of these tools in your toolbox?

0:03:10.434,0:03:13.702
The first ones that I showed you[br]tend to perform better.

0:03:13.702,0:03:15.734
So I suggest using those when you can.

0:03:15.734,0:03:19.587
But if you're in a situation where[br]you need to use a complex CSS selector,

0:03:19.587,0:03:24.053
and you can't use those,[br]then `querySelectorAll()` is your friend.

0:03:24.053,0:03:26.109
Try it out in the next challenge,

0:03:26.109,0:03:31.273
then get ready to see way more ways[br]that you can manipulate this webpage.