Obtendo um grupo de elementos em JavaScript

Nas lições anteriores, usamos o método querySelector para obter um único elemento da página. Agora chegou a hora de aprender a obter um grupo de elementos e realizar operações com muitos elementos de uma vez.

Para isso, existe o método querySelectorAll, que obtém todas as tags que correspondem a um seletor CSS na forma de um array de elementos. Para fazer algo com os elementos encontrados, é preciso trabalhar com o array obtido, por exemplo, iterando-o com um loop e, no loop, executar uma operação com cada elemento individualmente.

Suponha, por exemplo, que tenhamos parágrafos com a classe www:

html<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

Vamos obter o array desses parágrafos, iterar com um loop e, no loop, exibir os textos dos parágrafos encontrados no console:

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

for (let elem of elems) {
  console.log(elem.textContent);
}

E agora vamos adicionar um ponto de exclamação ao final do texto de cada parágrafo:

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

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