1
00:00:00,490 --> 00:00:05,140
In the previous lesson, we saw how we can use Query Selector to make a selection of an element and

2
00:00:05,140 --> 00:00:08,290
then make use of that element within our JavaScript.

3
00:00:09,260 --> 00:00:15,470
This lesson, we're going to look deeper into Querrey Selecter as well as Querrey Selecter, all when

4
00:00:15,470 --> 00:00:19,370
we were making our selection, we were selecting via the button tag.

5
00:00:20,320 --> 00:00:24,370
And if we had two buttons, so if we had tip number one.

6
00:00:25,970 --> 00:00:31,850
And tip number two, so the buttons both are button tags and there's no other way to identify them than

7
00:00:31,850 --> 00:00:34,310
the order that they're being represented on the page.

8
00:00:34,520 --> 00:00:39,140
So we've got tip number one, which we're using our JavaScript and transforming it to.

9
00:00:39,140 --> 00:00:39,610
Hello.

10
00:00:39,740 --> 00:00:44,540
And then tip number two, we don't actually see that we transformed it.

11
00:00:44,750 --> 00:00:47,510
And that's because we're using query selector.

12
00:00:47,630 --> 00:00:54,920
And what query selector does is it selects the first element of the page that matches that specified

13
00:00:54,920 --> 00:00:58,330
selector group or group of selections.

14
00:00:58,550 --> 00:01:01,730
So if none is found, then you're going to get null return.

15
00:01:02,000 --> 00:01:04,810
So essentially this is the syntax that we're using.

16
00:01:04,820 --> 00:01:09,860
And there's some also some additional examples that the Mozilla developer network about how you can

17
00:01:09,860 --> 00:01:10,910
make that selection.

18
00:01:11,150 --> 00:01:17,630
And as you can see, that this is a selection within that same format where we're using ID, we can

19
00:01:17,630 --> 00:01:22,400
use classes as well as the tag names in order to make the selection.

20
00:01:22,580 --> 00:01:26,750
And all it does is return back the matching tag.

21
00:01:27,470 --> 00:01:31,160
That is the first element that it finds within the page.

22
00:01:31,370 --> 00:01:33,950
Here's an example of how it's using class.

23
00:01:34,190 --> 00:01:38,930
And then here we're using query selector with a more complex selector.

24
00:01:39,020 --> 00:01:43,910
And this is similar to what you're going to find within success in order to make the selection process.

25
00:01:44,180 --> 00:01:49,680
If we want to select more than one element on the page that we can use, query selector all.

26
00:01:49,970 --> 00:01:57,680
So this returns back a node list representing all of the document elements that match that selection.

27
00:01:57,950 --> 00:02:03,740
So if, for instance, we had more than one element that we were selecting, we'll go back here and

28
00:02:03,740 --> 00:02:09,530
we're going to transform this and update this to query selector all go and refresh our page.

29
00:02:09,850 --> 00:02:13,400
We see that what's being returned over here is a node list.

30
00:02:13,610 --> 00:02:16,420
We've got a number of different elements on the page.

31
00:02:16,430 --> 00:02:22,280
And even if we only had one, we would only we would still be returning back within a node list, except

32
00:02:22,280 --> 00:02:23,870
we'd have a list length of one.

33
00:02:24,080 --> 00:02:27,220
And we can see that in our HTML is set to hello.

34
00:02:27,350 --> 00:02:30,800
But we're not specific on which element we're actually trying to select.

35
00:02:31,010 --> 00:02:37,640
And as Button has more than one item within the node list, it simply puts the inner turmoil to hello

36
00:02:37,790 --> 00:02:39,650
within the object of the node list.

37
00:02:39,830 --> 00:02:43,400
And we don't actually affect the actual elements that are on page.

38
00:02:43,550 --> 00:02:48,440
If we want to be more specific, we have to specify which element we want to select.

39
00:02:48,680 --> 00:02:55,610
We can do it within the same array type format where we select the node list starting at zero index

40
00:02:56,060 --> 00:02:58,990
and if we select the second one, it would be bracket one.

41
00:02:59,210 --> 00:03:02,000
So this would be selecting the second element responding.

42
00:03:02,210 --> 00:03:06,790
If we want to update that inner HTML, we could select it within this type of format.

43
00:03:07,040 --> 00:03:12,620
We also have the option because it's within an array type format that we can loop through the elements

44
00:03:12,620 --> 00:03:16,570
and update them and we'll show you more on that in the upcoming lessons.

45
00:03:16,580 --> 00:03:20,830
But for now, we only have the one button and we are going to be using query selector.

46
00:03:21,230 --> 00:03:26,630
So go ahead and try this out for yourself and create a simple exercise where you're selecting you've

47
00:03:26,630 --> 00:03:30,470
got more than one element that you're selecting and you still want to select the first one.

48
00:03:30,470 --> 00:03:32,570
So try using query selector all.

49
00:03:32,690 --> 00:03:39,410
And of course, if you only have the one element then you would be using query selector not query selector

50
00:03:39,410 --> 00:03:39,650
all.

51
00:03:39,920 --> 00:03:41,270
But go ahead and try this out.

52
00:03:41,420 --> 00:03:44,450
In the next lesson, we're going to continue to build out our project.