Obtención de un grupo de elementos en JavaScript
En lecciones anteriores usamos el método
querySelector para obtener un elemento
de la página. Ahora es el momento de aprender a obtener
un grupo de elementos y realizar operaciones
con muchos elementos a la vez.
Para esto existe el método querySelectorAll,
que obtiene todas las etiquetas que coinciden con el selector CSS
en forma de un array de elementos. Para
hacer algo con los elementos encontrados,
es necesario trabajar con el array obtenido, por ejemplo,
recorrerlo con un ciclo y en el ciclo ejecutar
alguna operación con cada elemento
por separado.
Supongamos, por ejemplo, que tenemos párrafos con la clase
www:
<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>
Obtengamos el array de estos párrafos, recorramos con un ciclo y en el ciclo mostremos los textos de los párrafos encontrados en la consola:
let elems = document.querySelectorAll('.www');
for (let elem of elems) {
console.log(elem.textContent);
}
Y ahora agreguemos un signo de exclamación al final del texto de cada párrafo:
let elems = document.querySelectorAll('.www');
for (let elem of elems) {
elem.textContent = elem.textContent + '!';
}
Se dan párrafos y un botón. Al hacer clic en el botón
encuentre todos los párrafos, recórralos en un ciclo
y establezca el texto de cada párrafo en el valor
'text'.
Se dan párrafos con texto y un botón. Al hacer clic en el botón, escriba al final del texto de cada párrafo su número de orden.
Se dan inputs con números, un párrafo y un botón. Al hacer clic en el botón, encuentre la suma de los números de los inputs y escriba esta suma en el texto del párrafo.
