1
00:00:00,470 --> 00:00:01,250
Welcome back.

2
00:00:01,280 --> 00:00:08,120
So what if we had more than one element and we had different types of elements, so let's create a main

3
00:00:08,120 --> 00:00:10,740
div and give it an idea of mean.

4
00:00:10,940 --> 00:00:13,880
This is where all of the main action is going to take place.

5
00:00:14,060 --> 00:00:19,900
And we're going to loop through and update select all of the elements contained within the main element.

6
00:00:20,480 --> 00:00:28,060
And this could also have a paragraph as well as it could have a span and any type of element.

7
00:00:28,100 --> 00:00:34,430
So what we want to do is we want to load all of the elements that are contained within a mean and we

8
00:00:34,430 --> 00:00:38,280
want to create a node list with those and all using JavaScript.

9
00:00:38,540 --> 00:00:44,390
So what that's going to do is that's going to build out an element list of all the current available

10
00:00:44,390 --> 00:00:48,350
elements on the page or that are contained within mean.

11
00:00:48,680 --> 00:00:55,080
I'm going to get rid of this console option, the console log messages as we want to clear that up.

12
00:00:55,100 --> 00:00:56,660
So just make sure that they're not there.

13
00:00:56,840 --> 00:00:59,030
Do a quick refresh, do an update.

14
00:00:59,090 --> 00:01:01,700
So everything is still updating and working properly.

15
00:01:01,940 --> 00:01:06,800
But in this case, I want to select any one of these elements that are available so we don't have just

16
00:01:07,010 --> 00:01:09,310
one element that we're always selecting.

17
00:01:09,320 --> 00:01:11,210
So we want to make this more dynamic.

18
00:01:11,450 --> 00:01:15,290
And currently we're selecting the div and we've got more than one div.

19
00:01:15,410 --> 00:01:19,040
So we will potentially have some problems with these elements.

20
00:01:19,190 --> 00:01:24,920
And as stated before, for just selecting the div, then we're automatically selecting that main element

21
00:01:25,070 --> 00:01:30,010
and that's going to represent that first div there that's available on the page.

22
00:01:30,200 --> 00:01:37,010
So let's make this more dynamic and the way that we're going to do that is within the document content

23
00:01:37,010 --> 00:01:38,140
loaded function.

24
00:01:38,390 --> 00:01:46,280
So here we're looping through each one of the available array class values and we're outputting those

25
00:01:46,550 --> 00:01:49,400
and we can also list out all of the elements.

26
00:01:49,730 --> 00:01:56,930
So let's create a main container and this will be our main we can call it node Lyster, or we're going

27
00:01:56,930 --> 00:02:02,690
to contain all of the main node contents so that we can utilize this in any one of the functions.

28
00:02:02,700 --> 00:02:05,870
So it made it global and we can access that globally.

29
00:02:06,140 --> 00:02:11,120
So if we do node Lyster and right now it's undefined, there's no content in it.

30
00:02:11,690 --> 00:02:16,750
So let's select all of the elements that are contained directly within the mean object.

31
00:02:16,760 --> 00:02:19,600
We'll clear this out and I'll do it here within the console first.

32
00:02:19,850 --> 00:02:28,310
So using document the document object query selector, we want to select all of the elements contained

33
00:02:28,310 --> 00:02:37,280
within mean so mean in itself is going to be have an ID so we can select that element with the idea

34
00:02:37,280 --> 00:02:37,970
of Maine.

35
00:02:39,470 --> 00:02:45,620
So we are able to make that selection, but we actually want to select all of the applicable elements.

36
00:02:45,860 --> 00:02:48,470
So we're using query selector all.

37
00:02:48,680 --> 00:02:50,210
And this creates a node list.

38
00:02:50,210 --> 00:02:56,330
As you can see here, it's going to return back a node list and I only have the one node that represents

39
00:02:56,330 --> 00:02:56,870
the div.

40
00:02:57,110 --> 00:03:01,160
So let's fine-tune this in the same way as you would with success.

41
00:03:01,430 --> 00:03:07,550
You can specify that you want to select all of the nodes that are directly under mean.

42
00:03:07,700 --> 00:03:12,140
So if we do add any more dynamically, it's going to list all of those out.

43
00:03:12,410 --> 00:03:19,190
So you can see when we use query selector all we get a node list and we've got each one of the available

44
00:03:19,190 --> 00:03:22,400
nodes in the list is being shown here within the node list.

45
00:03:22,670 --> 00:03:29,210
So let's do the same thing within a code where we're going to bring this selection into the code and

46
00:03:29,210 --> 00:03:30,950
attach it to an object.

47
00:03:31,130 --> 00:03:34,270
And we can call this the node Lyster object.

48
00:03:34,520 --> 00:03:39,630
So this is that one that we created and we can equal that to be equal to that.

49
00:03:39,890 --> 00:03:46,100
So now whenever I refresh and if I output node Lyster, we're going to see we're going to get a listing

50
00:03:46,100 --> 00:03:52,190
of all the available elements on the page that are contained within the mean ID element.

51
00:03:52,200 --> 00:03:57,560
So the same way as we loop through the class list, we can loop through a node list.

52
00:03:57,740 --> 00:04:02,300
So node list isn't exactly an array, but some of the things behave the same way.

53
00:04:02,540 --> 00:04:07,830
So if we want to iterate through a list of them, we could do the same thing as we did here with the

54
00:04:07,850 --> 00:04:08,900
for each loop.

55
00:04:08,900 --> 00:04:17,360
So looping through, we can take the node Lyster and use for each and loop through each one of the current

56
00:04:17,360 --> 00:04:20,360
elements that are available within the node list.

57
00:04:20,600 --> 00:04:24,740
And we can also cancel out each one of those items.

58
00:04:25,100 --> 00:04:30,830
So we can see that now when we refresh, we've got each one of the elements being represented here on

59
00:04:30,830 --> 00:04:31,160
the page.

60
00:04:31,190 --> 00:04:36,140
So the next thing that we want to do is we want to have a dropdown list so the user can actually select

61
00:04:36,140 --> 00:04:40,240
the elements dynamically and then apply these properties to them.

62
00:04:40,760 --> 00:04:43,140
So we're going to do that in the upcoming lesson.

63
00:04:43,310 --> 00:04:51,020
So for now, try query, select for all, select that element main and then select all of the elements

64
00:04:51,020 --> 00:04:56,930
that are directly beneath mean and return that into a global object called Node Lyster.

65
00:04:57,020 --> 00:04:59,690
And then you can loop through node lyster and output.

66
00:04:59,750 --> 00:05:05,150
Each one of those element objects, so they're ready to use and they're in the same state as if we made

67
00:05:05,150 --> 00:05:11,450
the selection with Query Selector as we've attached to that instance of that element in the document

68
00:05:11,450 --> 00:05:12,300
object model.

69
00:05:12,410 --> 00:05:17,360
So that means that we can manipulate it, we can update it, and we can do a whole bunch of really neat

70
00:05:17,360 --> 00:05:17,730
things.

71
00:05:18,020 --> 00:05:20,810
So that is all yet to come in the upcoming lessons.