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:

html<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:

javascriptlet 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:

javascriptlet elems = document.querySelectorAll('.www');

for (let elem of elems) {
  elem.textContent = elem.textContent + '!';
}