Selecionando múltiplos elementos: pegando várias 'caixinhas' de uma vez (querySelectorAll)

Descubra como selecionar vários elementos que compartilham características em comum.

Na aula anterior, você viu como pegar um elemento com querySelector.
Agora vamos dar um passo além: e quando você quer pegar vários elementos ao mesmo tempo?

É aqui que entra o querySelectorAll.

Ideia simples

Pense na página como uma estante com várias caixas iguais.
Com querySelector, você pega só a primeira caixa que combina com a regra.
Com querySelectorAll, você pega todas as caixas que combinam.

Exemplo básico

<ul>
  <li class="item">Maçã</li>
  <li class="item">Banana</li>
  <li class="item">Uva</li>
</ul>

const itens = document.querySelectorAll(".item");
console.log(itens);

Nesse caso, itens contém os 3 elementos com classe item.

O que o querySelectorAll retorna?

Ele retorna uma NodeList (uma coleção de elementos).
Você pode imaginar como uma lista organizada de resultados.

Acessando por posição

Como é uma coleção, você pode acessar por índice:

console.log(itens[0]); // primeiro item
console.log(itens[1]); // segundo item

Lembrando: começa em 0.

Quantos elementos foram encontrados?

Use .length:

console.log(itens.length); // 3

Muito útil para validar se encontrou algo.

Percorrendo todos os elementos (forma mais comum)

Com forEach:

itens.forEach(function(item) {
  console.log(item.textContent);
});

Também pode alterar todos de uma vez:

itens.forEach(function(item) {
  item.style.color = "blue";
});

Seletores possíveis com querySelectorAll

Você pode usar qualquer seletor CSS válido:

  • Classe: .card
  • Tag: p
  • Id: #menu (vai retornar no máximo 1, se id for único)
  • Combinado: ul li
  • Atributo: input[type='text']

Exemplo:

const linksMenu = document.querySelectorAll("nav a");

Diferença rápida: querySelector vs querySelectorAll

  • querySelector("..."): retorna o primeiro que combinar.
  • querySelectorAll("..."): retorna todos que combinarem.

E se não encontrar nada?

Não retorna null.
Retorna uma NodeList vazia.

const nada = document.querySelectorAll(".classe-que-nao-existe");
console.log(nada.length); // 0

Exemplo prático completo

<p class="aviso">Mensagem 1</p>
<p class="aviso">Mensagem 2</p>
<p class="aviso">Mensagem 3</p>

const avisos = document.querySelectorAll(".aviso");

avisos.forEach(function(aviso, index) {
  aviso.textContent = "Aviso atualizado " + (index + 1);
});

Resumo da lição

  • querySelectorAll seleciona vários elementos de uma vez.
  • Ele retorna uma NodeList (coleção de elementos).
  • Você pode usar índice, length e forEach.
  • Aceita seletores CSS (classe, tag, combinação, atributo).
  • Se não encontrar elementos, retorna lista vazia.