Por ejemplo, digamos que tengo 25 imágenes en una página web
Mi pregunta es: ¿cómo selecciono las primeras 6 imágenes para poder cambiar el setAttribute a otra cosa?
Pero no quiero hacer esto
document.queryselectorAll('img')[0] document.queryselectorAll('img')[1] document.queryselectorAll('img')[2] document.queryselectorAll('img')[3] document.queryselectorAll('img')[4] document.queryselectorAll('img')[5]Necesito una forma mucho más fácil de escribir toda esa ayuda🙏
¿Por qué no hacer un bucle?
Primero usamos querySelectorAll() para consultar el DOM y almacenar NodeList en una variable images . Luego hacemos un bucle para cambiar los atributos de los elementos.
const btn = document.getElementById('doIt'), images = document.querySelectorAll('img'); function addImages(){ for(let i = 0; i < 6; i++){ images[i].setAttribute('src', `https://picsum.photos/id/${i}/100/100`); } } btn.addEventListener('click', addImages); <img src=""></img> <img src=""></img> <img src=""></img> <img src=""></img> <img src=""></img> <img src=""></img> <img src=""></img> <p> <input type="button" id="doIt" value="add images"/>