1
00:00:00,750 --> 00:00:06,300
Within this section, we're going to be practicing, using and interacting with elements within the

2
00:00:06,300 --> 00:00:08,220
dorm, so let's set up some elements.

3
00:00:08,220 --> 00:00:13,830
I'm going to give them all a class of copy me, and then we're going to select these elements using

4
00:00:13,830 --> 00:00:16,800
the class so they can contain various words.

5
00:00:17,370 --> 00:00:19,320
They can also contain HTML.

6
00:00:20,200 --> 00:00:27,030
So we just have a variety of several different elements and I'm going to put some random content in

7
00:00:27,030 --> 00:00:27,290
there.

8
00:00:27,660 --> 00:00:33,870
So now that we've got some elements to work with, let's select these elements using our JavaScript.

9
00:00:34,440 --> 00:00:37,140
So going into where we've got our script tags.

10
00:00:37,890 --> 00:00:43,350
So going in where we've got going in, where we've got our script tags, we're going to select these

11
00:00:43,350 --> 00:00:43,940
elements.

12
00:00:44,130 --> 00:00:49,640
So we're going to call them RFP as we're going to be replicating these elements.

13
00:00:49,650 --> 00:00:52,400
We're going to be making copies of them using JavaScript.

14
00:00:53,070 --> 00:01:01,440
So using query selector all, we're going to select all the elements with a class of copy me and we're

15
00:01:01,440 --> 00:01:03,690
going to put them within our node list.

16
00:01:04,290 --> 00:01:06,690
So we console log out RFP.

17
00:01:06,990 --> 00:01:12,360
You can see that I've selected all of those elements in the node list and we also have a link for the

18
00:01:12,360 --> 00:01:13,610
node list as well.

19
00:01:13,980 --> 00:01:17,360
We can loop through them and attach that listeners to them.

20
00:01:18,180 --> 00:01:20,990
So selecting all of those elements.

21
00:01:21,000 --> 00:01:27,210
So now that we've got it within an object card RFP, we can use for each to loop through them.

22
00:01:27,210 --> 00:01:33,030
And just as we do with an array, we can loop through them and we can render out a function so we can

23
00:01:33,030 --> 00:01:33,990
get an element.

24
00:01:33,990 --> 00:01:40,080
We can get the index value of each one of these elements as we iterate through it.

25
00:01:40,750 --> 00:01:43,890
If we want, we can consider log that information out.

26
00:01:44,260 --> 00:01:46,530
So that's the element that we've selected.

27
00:01:46,860 --> 00:01:55,260
We can also log out its index value so you can see that we get all of those elements plus an index value,

28
00:01:55,260 --> 00:01:57,600
and then we can make use of that index value as well.

29
00:01:57,840 --> 00:02:03,870
So you don't have to do a for loop where you've setting in a loop, you can loop it within the for each

30
00:02:03,870 --> 00:02:08,370
and get a value in index value if we want to attach an event listener to them.

31
00:02:08,550 --> 00:02:12,980
So now that we've got these elements as objects, we can add event listeners to them.

32
00:02:13,260 --> 00:02:19,950
So adding an event listener, selecting a click event or is going to do a function directly anonymous

33
00:02:19,950 --> 00:02:22,840
function directly within that element of event listener.

34
00:02:23,430 --> 00:02:28,610
So now we can make them all clickable and we can also pass over that index value.

35
00:02:28,620 --> 00:02:32,660
So we still have that index value from over here outside of the scope.

36
00:02:32,670 --> 00:02:33,780
It's in the parent scope.

37
00:02:33,780 --> 00:02:36,600
So we can always access those variables and those values.

38
00:02:36,870 --> 00:02:42,390
So now when I click these, you can see that we can output those index values and we can make use of

39
00:02:42,390 --> 00:02:44,660
them within that listener as well.

40
00:02:44,670 --> 00:02:50,070
And so a bunch of elements give them all the same class and then using query selector, select them

41
00:02:50,070 --> 00:02:54,360
all, loop through them all and add an event listener to each and every one of them.

42
00:02:54,490 --> 00:02:58,940
And when you click them, output the index value of that element.

43
00:02:59,130 --> 00:03:00,960
So go ahead and add that into your project.

44
00:03:01,110 --> 00:03:04,680
And coming up next, I'm going to show you how we can clone these elements.