NodeList versus HTMLCollection
Entenda as diferenças entre coleções de elementos.
NodeList versus HTMLCollection é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
Dois tipos de coleção
Os métodos do DOM retornam um de dois objetos semelhantes a listas: uma NodeList ou uma HTMLCollection. Eles parecem semelhantes, mas diferem em aspectos importantes.
De onde vem a NodeList
querySelectorAll e childNodes retornam objetos NodeList. A retornada por querySelectorAll é estática: uma captura feita no momento da consulta.
const items = document.querySelectorAll(".item"); // static NodeListDe onde vem a coleção HTML
getElementsByClassName, getElementsByTagName e a propriedade children retornam objetos dinâmicos HTMLCollection.
const items = document.getElementsByClassName("item"); // live HTMLCollectionEstática versus dinâmica
Uma NodeList estática mantém seu conteúdo original mesmo que o DOM mude. Uma coleção HTML dinâmica reflete automaticamente adições e remoções.
const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does notSuporte a forEach
NodeList tem um forEach integrado. HTMLCollection não tem, portanto você precisa convertê-la ou usar um laço com índice.
document.querySelectorAll(".item").forEach((el) => {
console.log(el.textContent);
});Nenhuma é um vetor de verdade
Ambas se comportam como vetores: têm length e acesso por índice, mas não têm map, filter nem reduce.
const list = document.querySelectorAll(".item");
// list.map is undefinedConvertendo com Array.from
Array.from transforma qualquer uma das coleções em um vetor de verdade, disponibilizando todos os métodos de vetor.
const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);Convertendo com expansão
O operador de expansão é uma alternativa concisa que também produz um vetor de verdade.
const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);A armadilha do laço com lista dinâmica
Remover elementos enquanto você percorre uma coleção HTML dinâmica desloca os índices e faz itens serem ignorados. Converta-a primeiro em um vetor para percorrê-la com segurança.
const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safeAcessando ambas por índice
Ambas aceitam índices numéricos e length, portanto o acesso básico parece idêntico, embora o comportamento interno seja diferente.
const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);Escolhendo a opção certa
Use querySelectorAll quando quiser uma captura estável e forEach integrado. Use as coleções dinâmicas quando precisar especificamente que a lista permaneça sincronizada com o DOM.
Verificação rápida
Identifique a diferença.
Recapitulação
NodeList, obtida de querySelectorAll, é estática e tem forEach; a coleção HTML, obtida de getElementsByClassName, getElementsByTagName e children, é dinâmica e não tem forEach. Nenhuma é um vetor de verdade; use Array.from ou a expansão para converter antes de usar map, filter e redução, e para percorrer com segurança enquanto modifica a coleção.
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 59
- Aulas
- 200
Perguntas Frequentes
A aula “NodeList versus HTMLCollection” é grátis?
Sim — o texto completo de “NodeList versus HTMLCollection” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “NodeList versus HTMLCollection”?
Entenda as diferenças entre coleções de elementos. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “NodeList versus HTMLCollection”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Selecionando elementos com querySelector
- getElementById e getElementsByClassName
- Percorrendo pais, filhos e irmãos
- NodeList versus HTMLCollection