1
00:00:00,000 --> 00:00:05,512
The last selectors we'll look at
are querySelector and querySelectorAll.

2
00:00:05,512 --> 00:00:09,290
These are the most flexible
of all the DOM selectors.

3
00:00:09,290 --> 00:00:14,890
They accept IDs, classes, tag names,
and just about any valid CSS selector.

4
00:00:14,890 --> 00:00:18,986
They specifically work well with
descendant and attribute selectors, for

5
00:00:18,986 --> 00:00:19,567
example.

6
00:00:19,567 --> 00:00:24,545
The querySelector method returns the first
element that matches the specified

7
00:00:24,545 --> 00:00:25,293
selector.

8
00:00:25,293 --> 00:00:30,686
And querySelectorAll returns
a collection of all elements or

9
00:00:30,686 --> 00:00:33,909
nodes matching the given selector.

10
00:00:33,909 --> 00:00:38,287
I'll teach you how these selection methods
work in the browser console first.

11
00:00:38,287 --> 00:00:46,010
I'll start by selecting a button
element with document.querySelector and

12
00:00:46,010 --> 00:00:49,939
pass it the button tag name as a string.

13
00:00:49,939 --> 00:00:53,658
Even though there are multiple
button elements in the document,

14
00:00:53,658 --> 00:00:57,040
the browser only returns
the first one it finds.

15
00:00:57,040 --> 00:01:00,747
This selection method is flexible,
so I can be more specific

16
00:01:00,747 --> 00:01:04,392
by passing it the class or
ID of the element I want to select.

17
00:01:04,392 --> 00:01:11,450
For example,
the button with the class btn-toggle.

18
00:01:11,450 --> 00:01:16,298
Remember, when using querySelector and
querySelectorAll,

19
00:01:16,298 --> 00:01:20,783
you need to specify the selector
as you'd write it in CSS.

20
00:01:20,783 --> 00:01:26,211
This means adding a dot character
when selecting a class,

21
00:01:26,211 --> 00:01:32,211
and the hash or pound sign when
targeting an ID, like headline.

22
00:01:32,211 --> 00:01:35,560
Otherwise, the methods will return null or

23
00:01:35,560 --> 00:01:38,919
throw an exception or
error in the console.

24
00:01:38,919 --> 00:01:43,224
Next, I'll select all the li elements in

25
00:01:43,224 --> 00:01:48,759
the document using
document.querySelectorAll and

26
00:01:48,759 --> 00:01:52,330
pass it the li tag name as a string.

27
00:01:53,480 --> 00:01:55,448
Let's see what this returns.

28
00:01:55,448 --> 00:01:58,930
This time we get something
called a NodeList.

29
00:01:58,930 --> 00:02:05,385
And like an HTMLCollection, it resembles
an array holding all the li tag names

30
00:02:07,443 --> 00:02:11,443
And if we pass
the querySelectorAll method,

31
00:02:11,443 --> 00:02:16,390
the class highlight,
it selects and returns a NodeList

32
00:02:16,390 --> 00:02:21,561
containing just the list items
with the class highlight.

33
00:02:21,561 --> 00:02:26,235
A NodeList and
an HTMLCollection are very similar.

34
00:02:26,235 --> 00:02:30,482
They're both array-like collections of
DOM nodes in the order they appear on

35
00:02:30,482 --> 00:02:31,072
the page.

36
00:02:31,072 --> 00:02:36,224
The distinction between the two is not
super important to know right now,

37
00:02:36,224 --> 00:02:40,973
but in short, a NodeList is more
flexible than an HTMLCollection.

38
00:02:40,973 --> 00:02:43,690
It can contain any type of DOM node.

39
00:02:43,690 --> 00:02:48,994
For example, a NodeList can contain
element nodes and text nodes.

40
00:02:48,994 --> 00:02:53,732
You can also iterate through a NodeList
in the same way you would an array,

41
00:02:53,732 --> 00:02:58,546
using a for loop, for of, and other
array iteration methods, like map and

42
00:02:58,546 --> 00:03:01,312
forEach, which you may not have used yet.

43
00:03:01,312 --> 00:03:05,892
However, an HTMLCollection can
contain HTML elements only and

44
00:03:05,892 --> 00:03:09,720
you can't loop over it exactly
as you would an array.

45
00:03:09,720 --> 00:03:12,600
You don't need to worry about what
all this means in this course, but

46
00:03:12,600 --> 00:03:16,040
I've posted resources in the teacher's
notes if you want to learn more.

47
00:03:16,040 --> 00:03:21,134
The main difference to remember
between an HTMLCollection and

48
00:03:21,134 --> 00:03:26,130
a NodeList is that HTML collection
is a live data structure and

49
00:03:26,130 --> 00:03:29,221
NodeList is a static data structure.

50
00:03:29,221 --> 00:03:34,217
An HTMLCollection automatically updates
each time it detects a change in

51
00:03:34,217 --> 00:03:36,482
the items retrieved by a method.

52
00:03:36,482 --> 00:03:41,335
A NodeList remains the same, no matter
the changes that occur in your HTML.

53
00:03:41,335 --> 00:03:45,815
In other words, every time a new
element gets appended to the DOM,

54
00:03:45,815 --> 00:03:47,896
with JavaScript for example,

55
00:03:47,896 --> 00:03:53,272
an HTMLCollection will recognize the new
element, while a NodeList will not.

56
00:03:53,272 --> 00:03:58,224
Okay, so we know that querySelector
returns the first matching

57
00:03:58,224 --> 00:04:02,810
element only and
that querySelectorAll returns a NodeList

58
00:04:02,810 --> 00:04:06,395
holding all elements
matching the selector.

59
00:04:06,395 --> 00:04:09,955
Let's now jump over to app.js and

60
00:04:09,955 --> 00:04:14,991
replace getElementsByTagName
here in the items

61
00:04:14,991 --> 00:04:20,042
variable declaration
with querySelectorAll.

62
00:04:20,042 --> 00:04:24,868
And just below,
replace the getElementsByClassName method

63
00:04:24,868 --> 00:04:29,787
assigned to the highlights
variable with querySelectorAll,

64
00:04:29,787 --> 00:04:34,518
making sure that we update
the string passed to this method to

65
00:04:34,518 --> 00:04:38,157
.highlight since we're targeting a class.

66
00:04:38,157 --> 00:04:43,514
And to get more practice
with document.querySelector,

67
00:04:43,514 --> 00:04:48,990
I'll change the ID of this first
button element to a class.

68
00:04:48,990 --> 00:04:51,824
Then in my JavaScript,

69
00:04:51,824 --> 00:04:57,780
change the selection
method from getElementById

70
00:04:57,780 --> 00:05:02,893
to querySelector('.btn-main').

71
00:05:02,893 --> 00:05:07,641
I'll save my file and
refresh the browser to make sure

72
00:05:07,641 --> 00:05:12,085
that everything works as expected,
and it does.

73
00:05:12,085 --> 00:05:18,355
As you can see, these DOM selection
methods are really powerful and flexible.

74
00:05:21,913 --> 00:05:26,310
You've learned various ways to select
elements so far, and in some cases,

75
00:05:26,310 --> 00:05:28,936
different ways to make
the same selections.

76
00:05:28,936 --> 00:05:30,058
You may be wondering,

77
00:05:30,058 --> 00:05:33,431
how do I know I'm using the right
tool to select the right elements?

78
00:05:33,431 --> 00:05:34,950
Good question.

79
00:05:34,950 --> 00:05:38,313
Part of the answer is going
to be shaped by your HTML.

80
00:05:38,313 --> 00:05:41,505
Are there IDs on the elements
you want to select?

81
00:05:41,505 --> 00:05:45,251
Do you want to select all elements
with a given tag or class name?

82
00:05:45,251 --> 00:05:50,059
Or perhaps you want your selection methods
to be more flexible, accepting IDs,

83
00:05:50,059 --> 00:05:52,974
classes, tag names, and
other CSS selectors?

84
00:05:52,974 --> 00:05:56,976
Keep in mind that some methods
return the first matching element,

85
00:05:56,976 --> 00:06:01,060
while others return a collection or
list of all matching elements.

86
00:06:01,060 --> 00:06:03,311
It's a lot of information
to keep track of, so

87
00:06:03,311 --> 00:06:06,893
I've provided resources to help you
evaluate the tools you wish to use for

88
00:06:06,893 --> 00:06:09,640
your projects in the teacher's
notes with this video.