Vanilla JS. AddEventListener, querySelector and closest

List of some native Javascript functions to manipulate the DOM

Image for post
Image for post

0. What are we going to do?

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

1. Selecting images within an article

$('.an-article img').click(callback);
const articleImgs = document.querySelectorAll('.an-article img');
const articleImg = document.querySelector('.an-article img');

2. Listening to the event click on the images

const articleImgs = document.querySelectorAll('.an-article img');
articleImgs.addEventListener('click', callback)
Image for post
Image for post

3. Accessing the parent element

Image for post
Image for post

4. Bonus track

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

Do you want to read more articles like this?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store