1
00:00:02,084 --> 00:00:06,101
You've now got a lot of tools
in your toolbox for finding elements.

2
00:00:06,101 --> 00:00:08,645
And those will work great
a lot of the time.

3
00:00:08,645 --> 00:00:12,492
But there is one final tool
that's the most powerful of them all:

4
00:00:12,492 --> 00:00:18,070
the ability to find elements
based on any CSS selector.

5
00:00:18,070 --> 00:00:20,384
Do you remember CSS selectors?

6
00:00:20,384 --> 00:00:24,562
The basic ones were
finding by tag name,

7
00:00:24,562 --> 00:00:26,170
or ID

8
00:00:26,170 --> 00:00:27,518
or class

9
00:00:27,518 --> 00:00:30,027
But there are many
more advanced selectors:

10
00:00:30,027 --> 00:00:35,333
descendant selectors, attribute selectors,
combined class plus element selectors--

11
00:00:35,333 --> 00:00:38,547
this would be a good time
for you to review CSS selectors

12
00:00:38,547 --> 00:00:40,643
if you've forgotten all of those.

13
00:00:40,643 --> 00:00:45,642
For example, what if I wanted
to specifically style only the elements

14
00:00:45,642 --> 00:00:50,765
with class name "animal"
that are inside a paragraph?

15
00:00:50,765 --> 00:00:54,606
Let's stick a `` tag in
and do that.

16
00:00:54,606 --> 00:00:57,124
So I would first write `p`,

17
00:00:57,124 --> 00:01:01,532
and then a space, to say that
I'm looking inside ``s,

18
00:01:01,532 --> 00:01:06,492
and then dot animal to say that
I'm looking for any elements

19
00:01:06,492 --> 00:01:09,603
with class name "animal".

20
00:01:09,603 --> 00:01:12,671
And I'll just color them red.

21
00:01:12,671 --> 00:01:14,130
Beautiful.

22
00:01:14,130 --> 00:01:19,665
Now, I could use the same CSS selector
to find those elements in JavaScript,

23
00:01:19,665 --> 00:01:24,944
using the
`document.querySelectorAll()` method.

24
00:01:24,944 --> 00:01:30,323
So I'll change this line here.

25
00:01:30,323 --> 00:01:35,377
And I need to pass the CSS selector
as the argument,

26
00:01:35,377 --> 00:01:38,392
as a string in quotes.

27
00:01:38,392 --> 00:01:42,486
And there, the paragraph
is about cats again.

28
00:01:42,486 --> 00:01:45,823
You could pass any valid
CSS selector to that function,

29
00:01:45,823 --> 00:01:48,414
and it will return back
a collection of elements

30
00:01:48,414 --> 00:01:50,883
that you can then loop through.

31
00:01:50,883 --> 00:01:53,507
Do you remember last time
how we said

32
00:01:53,507 --> 00:01:57,617
that `getElementsByTagName()`
returns an HTML collection

33
00:01:57,617 --> 00:01:59,998
that looks a lot like an array?

34
00:01:59,998 --> 00:02:06,710
Well this method returns a `NodeList`,
which is also a lot like an array,

35
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.

36
00:02:12,530 --> 00:02:16,282
And you probably won't run into
the differences between

37
00:02:16,282 --> 00:02:20,029
a NodeList and an HTMLCollection
when you're using these methods.

38
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.

39
00:02:24,375 --> 00:02:28,924
Okay, now, there's also a method
that will look up CSS selectors,

40
00:02:28,924 --> 00:02:32,782
and return only one element,
if you know your CSS selector

41
00:02:32,782 --> 00:02:35,061
is only selecting one thing.

42
00:02:35,061 --> 00:02:37,409
In practice, it's not really as useful,



43
00:02:37,409 --> 00:02:40,458
because you usually have
an ID that you can use in that case.

44
00:02:40,458 --> 00:02:43,079
But I'll show it to you just in case.

45
00:02:43,079 --> 00:02:46,310
So here, instead of `getElementById`,
I could actually say:

46
00:02:46,310 --> 00:02:48,577
`document.querySelector("`

47
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.

48
00:02:53,565 --> 00:02:54,520
Ta-da.

49
00:02:54,520 --> 00:02:57,917
So, as you see, this is really similar
to `querySelectorAll()`,

50
00:02:57,917 --> 00:03:01,547
except we're only selecting one,
so it's just `querySelector()`,

51
00:03:01,547 --> 00:03:06,510
and we just pass in some CSS selector
that we expect to get back one element.

52
00:03:06,510 --> 00:03:10,434
So when should you use
each of these tools in your toolbox?

53
00:03:10,434 --> 00:03:13,702
The first ones that I showed you
tend to perform better.

54
00:03:13,702 --> 00:03:15,734
So I suggest using those when you can.

55
00:03:15,734 --> 00:03:19,587
But if you're in a situation where
you need to use a complex CSS selector,

56
00:03:19,587 --> 00:03:24,053
and you can't use those,
then `querySelectorAll()` is your friend.

57
00:03:24,053 --> 00:03:26,109
Try it out in the next challenge,

58
00:03:26,109 --> 00:03:31,273
then get ready to see way more ways
that you can manipulate this webpage.