No sé cómo puedo capturar elementos individuales con las mismas clases en javascript puro (sin jQuery).
ejemplo:
<div class="item"> <div class="divInside"></div> </div> <div class="item"> <div class="divInside"></div> </div> <div class="item"> <div class="divInside"></div> </div>Específicamente, quiero capturar un "divInside" para el "elemento" para poder agregar una función de clic. ¿Alguien me puede ayudar?
Gracias de antemano por su respuesta.
document.querySelectorAll('.divInside') obtendrá una lista de todos los elementos en el documento con la clase divInside .
Agregar un evento de clic a todos ellos debería ser tan fácil como esto:
const elems = document.querySelectorAll('.divInside') elems.forEach(element => element.addEventListener('click', e => { //Whatever you want to do })) Lo que hace querySelectorAll es esencialmente permitirle buscar elementos en el DOM usando un selector de CSS coincidente. Si desea obtener solo el primer elemento que coincida con un selector, puede usar document.querySelector en su lugar.
Usaría querySelectorAll seguido de forEach para recorrer y agregar los eventos de clic.
function clickEvent(e){ console.log(e); } document.addEventListener('DOMContentLoaded', function(){ document.querySelectorAll('.item > .divInside').forEach((div)=>{ div.addEventListener('click', clickEvent); }); });