Within this section, we're going to be practicing, using and interacting with elements within the
dorm, so let's set up some elements.
I'm going to give them all a class of copy me, and then we're going to select these elements using
the class so they can contain various words.
They can also contain HTML.
So we just have a variety of several different elements and I'm going to put some random content in
there.
So now that we've got some elements to work with, let's select these elements using our JavaScript.
So going into where we've got our script tags.
So going in where we've got going in, where we've got our script tags, we're going to select these
elements.
So we're going to call them RFP as we're going to be replicating these elements.
We're going to be making copies of them using JavaScript.
So using query selector all, we're going to select all the elements with a class of copy me and we're
going to put them within our node list.
So we console log out RFP.
You can see that I've selected all of those elements in the node list and we also have a link for the
node list as well.
We can loop through them and attach that listeners to them.
So selecting all of those elements.
So now that we've got it within an object card RFP, we can use for each to loop through them.
And just as we do with an array, we can loop through them and we can render out a function so we can
get an element.
We can get the index value of each one of these elements as we iterate through it.
If we want, we can consider log that information out.
So that's the element that we've selected.
We can also log out its index value so you can see that we get all of those elements plus an index value,
and then we can make use of that index value as well.
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
and get a value in index value if we want to attach an event listener to them.
So now that we've got these elements as objects, we can add event listeners to them.
So adding an event listener, selecting a click event or is going to do a function directly anonymous
function directly within that element of event listener.
So now we can make them all clickable and we can also pass over that index value.
So we still have that index value from over here outside of the scope.
It's in the parent scope.
So we can always access those variables and those values.
So now when I click these, you can see that we can output those index values and we can make use of
them within that listener as well.
And so a bunch of elements give them all the same class and then using query selector, select them
all, loop through them all and add an event listener to each and every one of them.
And when you click them, output the index value of that element.
So go ahead and add that into your project.
And coming up next, I'm going to show you how we can clone these elements.