12.02.2025

Percorrendo Elementos com document.querySelectorAll: Eliminando Redundâncias

Resposta Rápida

Para iterar sobre elementos obtidos através de document.querySelectorAll(), é recomendado usar o método forEach():

document.querySelectorAll('seletor').forEach(el => {
    // Dessa forma, você pode interagir com o elemento.
});

Substitua 'seletor' pelo seu seletor CSS desejado para iniciar o loop.

Fundamentos da Iteração com Conversão para Array

Você pode transformar uma NodeList em um array usando o operador de espalhamento:

[...document.querySelectorAll('seletor')].forEach(el => {
    // Agora você tem acesso a todos os métodos de array!
});

Essa abordagem permite que você utilize métodos de array, incluindo map, filter e reduce.

Laço For: O Método Clássico para Percorrer NodeList

O laço for pode iterar através de uma NodeList sem transformá-la:

const nodes = document.querySelectorAll('seletor');
for (let i = 0; i < nodes.length; i++) {
    // O objeto nodes[i] é o nosso campo de trabalho!
}

Esse método proporciona total controle sobre a iteração, permitindo que você aplique condições, quebras ou pulos conforme necessário.

Preso em Navegadores Antigos? Temos um Plano B!

Se versões anteriores de navegadores não suportam o método forEach em NodeList, um polyfill ou a opção a seguir pode ajudar:

Array.prototype.forEach.call(document.querySelectorAll('seletor'), function(el) {
    // Agora o elemento pode usar 'forEach'!
});

Esse método aplica forEach do protótipo de array diretamente à NodeList.

Compatibilidade com Diferentes Navegadores: Não Esqueça do Bom e Velho ES5!

Compatibilidade aprimorada com vários navegadores pode ser garantida transpiling o JavaScript moderno para ES5 usando ferramentas como Babel.js.

Visualização

Depurar JS se assemelha a um jogo de detetive em um filme de crime onde você é simultaneamente o vilão 🔪:

Antes: [🃏1, 🃏2, 🃏3, 🃏4]
Depois:  [🔁1, 🔁2, 🔁3, 🔁4]

Os cartões 'virados' simbolizam elementos DOM que são atualizados durante a iteração.

Verificação de Elementos: Examine Primeiro, Depois Tire Conclusões!

Antes de iniciar a travessia, certifique-se de que a NodeList contém elementos esperados:

const todasAsCheckboxes = document.querySelectorAll('input[type="checkbox"]');
if (todasAsCheckboxes.length === 0) {
    console.error('Aviso! Nenhuma checkbox encontrada! Você precisa verificar suas expectativas!');
}

Ao aplicar essa medida de precaução, você evitará processar seleções errôneas ou vazias.

Armadilha com Valores Falsy: Confie Apenas em Dados Confiáveis!

Certifique-se de que, ao atribuir valores no loop, você não pule valores falsy:

for (let checkbox of todasAsCheckboxes) {
    if (checkbox) {
        // A checkbox passou na verificação! Vamos continuar.
    }
}

Proteger-se contra elementos undefined ou null na NodeList pode economizar muito tempo depurando seu código.

Ambiente do Navegador: Quando Isso Importa!

Ao desenvolver seus métodos, considere a compatibilidade com todos os navegadores-alvo. Verifique o suporte do método para NodeList antes de usá-los:

- `.forEach` — não suportado no Internet Explorer.
- O operador de espalhamento — um recurso introduzido no ES6, e não é suportado por todos os navegadores.

Quando os Navegadores Esquecem a Idade!

Ocasionalmente, você pode precisar usar um polyfill para NodeList.prototype.forEach em navegadores ultrapassados. Nesses casos, incluir os scripts apropriados ou usar o serviço Polyfill.io será uma boa solução.

Recursos Úteis

1. Tudo Sobre Document.querySelectorAll() | MDN — Detalhes sobre o método querySelectorAll na documentação do MDN.
2. NodeList e Método forEach() | MDN - Usando forEach para iterar sobre NodeList.
3. Como Derrotar Dragões com Loops QuerySelectorAll | CSS-Tricks — Dicas sobre como usar querySelectorAll com loops.
4. Os Segredos de Encontrar Elementos no DOM | Javascript.info — Descubra o mundo dos segredos do DOM e querySelectorAll.
5. A Arte de Converter NodeList em Array — Aprenda a como converter NodeList em um array e criar sua obra-prima.

Video

Navigation