1
00:00:00,150 --> 00:00:05,820
And there's one other one that I just want to show you before we get to the lesson, and that's where

2
00:00:05,820 --> 00:00:10,590
we can get the refs and select the ref value of an element.

3
00:00:10,830 --> 00:00:16,800
So, for instance, if this was going to Google, we could get that information.

4
00:00:16,800 --> 00:00:17,910
We can call it links.

5
00:00:18,120 --> 00:00:21,650
So we'll get all of the elements using query selector.

6
00:00:21,660 --> 00:00:22,750
So refresh.

7
00:00:22,770 --> 00:00:25,530
So now when we look at links, we've got a node list.

8
00:00:25,530 --> 00:00:27,660
So we've got all of the elements there.

9
00:00:28,350 --> 00:00:34,050
Take links and we're going to loop through all of the available elements that we've selected in the

10
00:00:34,050 --> 00:00:37,440
node list and put them as a value of L.

11
00:00:37,890 --> 00:00:40,020
Let's make sure that we do have them in the console.

12
00:00:40,020 --> 00:00:40,860
So we refresh.

13
00:00:41,100 --> 00:00:42,590
We've got all of those values.

14
00:00:42,900 --> 00:00:46,800
So let's take a look through and we're going to select the attribute.

15
00:00:47,070 --> 00:00:53,310
We're going to get the attribute and attribute that we're going to get is the C, we've got a bunch

16
00:00:53,310 --> 00:00:59,370
of them just have hashes and there's the one with Google so we can also update and we can set attribute

17
00:00:59,370 --> 00:00:59,890
as well.

18
00:01:00,450 --> 00:01:06,120
So if you want to set all of the refs, whatever website we want, whatever our favorite website is,

19
00:01:06,810 --> 00:01:10,620
so that when we go in here, all of these are going to link out to a website.

20
00:01:11,470 --> 00:01:17,800
That was specified, so an update, the link there, so we did have a lesson challenge and the lesson

21
00:01:17,800 --> 00:01:26,620
challenge was to loop through all of the list items and update the text content within those list items

22
00:01:26,620 --> 00:01:27,760
or do that now.

23
00:01:28,100 --> 00:01:33,790
So we've got our list items using document, query, selector, all.

24
00:01:33,980 --> 00:01:41,050
We're going to select all of the list items that are available on the page and then list items using

25
00:01:41,050 --> 00:01:46,750
for each against loop through all of the list items that we can also return back the index because we're

26
00:01:46,750 --> 00:01:48,880
going to need that to update the ID.

27
00:01:49,390 --> 00:01:54,420
So to update the ID of the item because we've now we've got it within the list.

28
00:01:54,430 --> 00:02:02,170
So just as we saw over here, well we've got the element as item and we can update the ID to be equal

29
00:02:02,170 --> 00:02:05,260
to Elai plus whatever the counters.

30
00:02:05,470 --> 00:02:13,390
And also let's update the text content of each one of the items of the list so we can have list item

31
00:02:13,630 --> 00:02:16,030
and we just add in that count to it.

32
00:02:16,040 --> 00:02:21,950
So that will just return back to the index and output the item get attribute.

33
00:02:22,000 --> 00:02:26,680
We're going to output all of the class from each one of the elements into the console.

34
00:02:26,690 --> 00:02:31,660
So let's try that and refresh so you can see we're looping through all of the list items.

35
00:02:31,930 --> 00:02:34,150
We've updated the values of the list items.

36
00:02:34,150 --> 00:02:39,250
So we've actually overwritten the anchors because there's there's no more available.

37
00:02:39,250 --> 00:02:42,160
So we've overwritten those with the list items.

38
00:02:42,160 --> 00:02:43,390
But this was the challenge.

39
00:02:43,960 --> 00:02:46,300
So we've given them list item ID.

40
00:02:46,570 --> 00:02:52,180
And when we check out the HTML, we do an inspect on the HTML.

41
00:02:52,420 --> 00:02:58,990
You can see that they've all been assigned IDs and we're also outputting their classes into the console.

42
00:02:59,380 --> 00:03:05,020
So the ones that do have class there get output and then the ones that don't just have NUL in there.

43
00:03:05,170 --> 00:03:07,720
So we're not actually outputting them into the console.

44
00:03:08,050 --> 00:03:16,360
So if we can also use a condition as well so we can check to see if this exists and only if the class

45
00:03:16,360 --> 00:03:19,480
exists, if it's not null, that we output into the console.

46
00:03:19,480 --> 00:03:22,600
So you can update the code as well to to do that.

47
00:03:22,930 --> 00:03:25,210
So I know we covered quite a bit in this lesson.

48
00:03:25,220 --> 00:03:26,320
So do try this out.

49
00:03:26,950 --> 00:03:31,480
And coming up next, I'm going to show you more that you can do with Element classes.