Array, NodeList e outros iteráveis em Javascript: qual a diferença?
Vocês também já receberam o erro abaixo:
document.querySelectorAll(...).map is not a function
Isso acontece porque o .map() é um método apenas de array, e o que o .querySelectorAll() retorna não é um array 🤯
Sim, o que ele retorna é um Nodelist, uma estrutura de dados em Javascript que é tipo array, mas não é array. É tipo net.
Tem outras como o nodelist?
- HTMLCollection
- DOMTokenList
- NamedNodeMap
Apesar da confusão com o .map(), todos ainda têm coisas em comum:
- São iteráveis com o comando
for - Você pode descobrir o tamanho da lista com o
.length - E também pode acessar um item da lista com a notação de colchetes
list.[3]
Existem ainda vários detalhes sobre elas, como:
- Live collection e static collection
- Como descobrir os métodos que cada estrutura de dados acesso
- Como criar essas estrutura de dados
- Alguns casos de uso de cada uma delas
- Compatibilidade
Expliquei tudo isso no meu blog, pode conferir no link das fontes :D