Today I have prepared a short article but that I found interesting to do, especially now that JQuery has ceased to be the library we installed as soon as we started developing the front of a website.

Basically what I want with this article is that you familiarize yourself, if you are not already, with 3 Javascript functions that allow us to solve the use cases we were so used to with JQuery. These are:

• addEventListener, to handle the clicks on the elements of our application.
• querySelector and querySelectorAll to select elements in the DOM (as we did at the time with$('selector').
• closest to be able to select the closest parent element we have.

So, with that said, let’s see how to use them.

0. What are we going to do?

The idea of this article is going to be able to detect a click on an image and add a class to the element that contains it. That is, if we have the following HTML:

<article class="an-article"> 
  <header class="an-article__header">
    <img src="..." alt="...">
 </header>
</article>

What we will do is detect a click on the image and add a class to the header header.

1. Selecting images within an article

First of all, we will need to select the images that are within an <article class="an-article"> to be able to listen later to the event click on them. What we did in JQuery as follows:

$('.an-article img').click(callback);

In Vanilla JS we will do it as follows:

const articleImgs = document.querySelectorAll('.an-article img');

In the articleImgs variable we will have an array with all the DOM elements that match our selector. In the case that we are on a screen where there is only an image, it would be enough to write the following line:

const articleImg = document.querySelector('.an-article img');

for articleImg to have the image DOM element.

2. Listening to the event click on the images

Suppose we are in a view where there are several images, so we have executed:

const articleImgs = document.querySelectorAll('.an-article img');

What we want now is to add the event click on them, for which it is not enough to do (“inspired by JQuery”):

articleImgs.addEventListener('click', callback)

But we will have to go through all the images and add that event “one by one”. To tour the array, Vanilla JS provides us with the forEach method, which we will use as follows:

The important things you will find in the previous code are:

• forEach allows us to iterate over each element of the array, passing it into the function it receives as arguments.
• The click event is added by the addEventListener function
• It is necessary that we verify that the event has been launched on the image itself and not on an interior element or similar cases, so for that purpose the event object that we receive in callback provides us in its target property with the element that has received the click. In this way, using the matcher function we can check if this element has the image selector that we are looking for and, if so, continue the execution.

3. Accessing the parent element

Finally, now that we can detect the click on our image, it is enough that we learn to select the parent element in order to be able to add the class we want.

JQuery provided us with the parents and parent methods to do this work. On the other hand, in Vanilla JS we will have to use the closest method that unfortunately is not implemented in Internet Explorer:

But who cares about Internet Explorer at this point? Well, the client generally 😄, but luckily in the documentation of the method they give us their pollyfill so that we can add it in case we want to keep our client happy with their brand new Internet Explorer:

That said, we will use the closest method to access the parent element of our image:

As you can see, the closest method returns the parent element closest to the selector that we specify. Later we will use the classList property of Javascript to check if it has the class and if not, we will add it. Easy right?

4. Bonus track

In the case that you want to add all this logic once the DOM has been loaded it is enough that you do it within:

document.addEventListener('DOMContentLoaded', function() {//}

the same way we did with $(document).ready .

In summary, since the launch of ES6 that simplification we had with JQuery is already present in Vanilla JS, so you probably no longer need to resort to it for this type of case.

I leave the link to the CodePen in case you want to play a little more with this example, which although you probably already knew it, I think it is not yet known by 100% of the developers.

Do you want to read more articles like this?

If you liked this article I encourage you to subscribe to the newsletter that I send every Sunday with similar publications to this and more recommended content: 👇👇👇