Vanilla JS. AddEventListener, querySelector y closest

Lista de funciones nativas de Javascript para manipular el DOM

Image for post
Image for post

0. ¿Qué vamos hacer?

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

1. Seleccionando las imágenes dentro de un artículo

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

2. Escuchando el evento click en las imágenes

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

3. Accediendo al elemento padre

Image for post
Image for post

4. Bonus track

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

¿Quieres recibir más artículos como este?

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