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:

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

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

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

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

Dados parágrafos e um botão. Ao clicar no botão, encontre todos os parágrafos, itere-os com um loop e defina o texto de cada parágrafo para o valor 'text'.

Dados parágrafos com texto e um botão. Ao clicar no botão, escreva no final do texto de cada parágrafo o seu número de ordem.

Dados inputs com números, um parágrafo e um botão. Ao clicar no botão, encontre a soma dos números dos inputs e escreva essa soma no texto do parágrafo.