And there's one other one that I just want to show you before we get to the lesson, and that's where
we can get the refs and select the ref value of an element.
So, for instance, if this was going to Google, we could get that information.
We can call it links.
So we'll get all of the elements using query selector.
So refresh.
So now when we look at links, we've got a node list.
So we've got all of the elements there.
Take links and we're going to loop through all of the available elements that we've selected in the
node list and put them as a value of L.
Let's make sure that we do have them in the console.
So we refresh.
We've got all of those values.
So let's take a look through and we're going to select the attribute.
We're going to get the attribute and attribute that we're going to get is the C, we've got a bunch
of them just have hashes and there's the one with Google so we can also update and we can set attribute
as well.
So if you want to set all of the refs, whatever website we want, whatever our favorite website is,
so that when we go in here, all of these are going to link out to a website.
That was specified, so an update, the link there, so we did have a lesson challenge and the lesson
challenge was to loop through all of the list items and update the text content within those list items
or do that now.
So we've got our list items using document, query, selector, all.
We're going to select all of the list items that are available on the page and then list items using
for each against loop through all of the list items that we can also return back the index because we're
going to need that to update the ID.
So to update the ID of the item because we've now we've got it within the list.
So just as we saw over here, well we've got the element as item and we can update the ID to be equal
to Elai plus whatever the counters.
And also let's update the text content of each one of the items of the list so we can have list item
and we just add in that count to it.
So that will just return back to the index and output the item get attribute.
We're going to output all of the class from each one of the elements into the console.
So let's try that and refresh so you can see we're looping through all of the list items.
We've updated the values of the list items.
So we've actually overwritten the anchors because there's there's no more available.
So we've overwritten those with the list items.
But this was the challenge.
So we've given them list item ID.
And when we check out the HTML, we do an inspect on the HTML.
You can see that they've all been assigned IDs and we're also outputting their classes into the console.
So the ones that do have class there get output and then the ones that don't just have NUL in there.
So we're not actually outputting them into the console.
So if we can also use a condition as well so we can check to see if this exists and only if the class
exists, if it's not null, that we output into the console.
So you can update the code as well to to do that.
So I know we covered quite a bit in this lesson.
So do try this out.
And coming up next, I'm going to show you more that you can do with Element classes.