Now that was the first example
where we see one scenario where a for loop could be helpful.
In the next example, we also will need a loop
because I wanna highlight all the elements,
which we have here, all the anchor elements I mean,
which we have in this text here.
We've got three anchor elements
and they might be a bit hard to see.
That's why we have this button, which when clicked,
should highlight them.
Now to highlight them, install CSS.
I got this highlight class,
which when applied to an anchor element,
adds this purple background
and increases the padding a little bit.
And therefore, that's now the next exercise,
which I will work on here.
It's the Highlight links exercise.
Now, if we have a look at index.html
and there at this section that contains all the content
we need for this exercise,
then we see that we will again
need to get access to this button here.
And we also will need to get access
to all the anchor elements which we have in this text.
And therefore, here I'll first of all start
by getting access to my button
by creating a new constant, the highlightLinksButtonElement.
And here, I'll again use document.querySelector
and actually I'll use the same approach as before
and select a button in an element that has a certain ID.
And here, unlike before, we need this approach
because now this of course is not the first button
on the page anymore.
So the wrapping element has an idea of highlight-links.
Hence, we can use this ID here
to select the first button in an element with that ID
by simply using highlight-links as an ID here
in this query selector CSS query parameter.
That should give us access to this button.
Then we'll need a function that should be triggered
when the button is clicked
and I'll name this function highlightLinks like this
and I then, before we add the code in the function,
will reach out to this highlightLinksButtonElement
and add that event listener for the click event
and point at highlightLinks at this function here.
And in highlightLinks,
we now wanna find all the anchor elements in that section
with highlight-links with that ID in the end,
and then add that warning class to all the elements.
And one way of solving this problem, and by the way,
I'm saying one way because in programming,
you will always have multiple of achieving a certain result
and solving a certain problem,
but one way of doing it is by using a for of loop.
And specifically, we can, first of all, get access
to all the anchor elements
and store them in a constant named anchorElements,
for example, by using document.querySelectorAll.
Now, we haven't used this method too much up 'til now,
but I did mention it before.
QuerySelectorAll works like querySelector,
but where querySelector selects the first matching element,
querySelectorAll will, as the name implies,
return all matching elements.
So here, we still add a CSS query as a string parameter,
but here, I'm now looking for anchor elements
in this highlight-links section,
so we'll actually copy that code
from the first querySelector, but replace button with A
to select like all the anchor elements.
And since it selects all elements and not just one,
querySelectorAll in the end returns an array.
And since we have an array,
we can use the for of loop as we learned
to loop through all the elements in that array.
So for that, we can write this for of loop here.
And we learned that here we can create a helper constant,
which will be recreated for every loop iteration,
which will point at the individual array elements.
And here, I'll name that anchorElement
because we'll have access to the single anchor elements
through that constant here.
And then we need the of keyword
and then we point at a certain array,
which in my case is anchorElements, this array of elements.
And now inside of the loop,
we can do something with every array element,
so with every anchorElement in this case.
And here, I then wanna use my anchorElement
to access to class list object we learned about earlier
and add the highlight class like this
to make sure that the element is highlighted.
And that should be all we need here.
If we now save this, if I click this button,
then the elements get highlighted
because of course if I select this here,
they do have this highlight class here.
And that's this example here implemented,
that's this use case here implemented,
in this case with help of a for of loop.