28.01.2025

Convertendo NodeList do DOM para Array em JavaScript: Uma Solução para IE

Resposta Rápida

Você pode converter uma NodeList do DOM em um array utilizando Array.from() ou o operador de espalhamento ...:

// Utilizando Array.from()
const nodesArray = Array.from(document.querySelectorAll('div'));

// Utilizando o operador de espalhamento
const nodesArray = [...document.querySelectorAll('div')];

Esses métodos permitem que você converta facilmente uma NodeList em um array, possibilitando o uso de métodos de array como map(), filter(), entre outros.

Dois Métodos de Conversão Mais Populares e Sua Compatibilidade

Os métodos existentes para transformar uma NodeList em um array — Array.from() e o operador de espalhamento (…) — funcionam de maneira diferente em diversos navegadores:

• Operador de espalhamento (…): suportado pela maioria dos navegadores modernos, mas não é compatível com o Internet Explorer.
• Array.from(nodelist): possui compatibilidade entre navegadores, tornando-se a escolha preferida para um amplo público.

O Desafio: Navegadores Antigos

Trabalhar com navegadores mais antigos, como o Internet Explorer, apresenta desafios específicos:

• Você pode usar um loop for para adicionar manualmente todos os elementos da NodeList a um array — isso é confiável, mas não é a abordagem mais atual.
• Alternativamente, você pode utilizar uma abordagem funcional: aproveitando a expressão [].map.call(nodelist, function (item) { return item; }).

Nota: De acordo com as especificações do ECMAScript, aplicar Array.prototype.slice a objetos NodeList pode levar a um comportamento não padrão entre diferentes navegadores.

Reconhecendo a Importância da Compatibilidade entre Navegadores

Para garantir que seu código JavaScript funcione de maneira consistente em diferentes navegadores, não é sempre necessário depender das tecnologias mais recentes:

• Utilizar [].slice.call(nodelist) pode ser problemático devido à incompatibilidade com o Internet Explorer.
• O loop for...of é adequado para ambientes compatíveis com ES6, mas não deve ser usado em versões mais antigas do IE.
• Usar polyfills pode fornecer funcionalidade para NodeList.forEach em navegadores que não oferecem suporte nativo.
• A escolha das técnicas de programação depende bastante da compreensão do seu público e de suas preferências de navegador.

Lembre-se: uma NodeList é mais do que apenas um "array peculiar". É uma estrutura única que reflete o estado atual do DOM.

Visualização

Para ilustrar, você pode pensar em converter uma NodeList em um array como desembrulhar compras de uma sacola e organizá-las nas prateleiras da geladeira:

Antes: 🛍️ (NodeList) -> [🍎,🍞,🥛]                  // As frutas e pães ainda estão na sacola.
Depois: 🗄️ (Array)    -> 🍎, 🍞, 🥛                  // Cada item está guardado e pronto para uso!

// As compras foram feitas, vamos desempacotar as sacolas!
let array = Array.from(NodeList); // NodeList transformado em Array, assim como 🛍️ se tornou 🗄️.
// ou, se você preferir uma abordagem mais moderna...
let array = [...NodeList];        // A mesma coisa, mas pelo operador de espalhamento. 🛍️ se tornou 🗄️.

E aí está: a NodeList foi convertida com sucesso em um array. Parabéns! 🎉

Nem Sempre Necessário: Alternativas Modernas e Compreendendo o Ambiente

Converter uma NodeList do DOM em um array não é sempre necessário, apesar da crença comum:

• O ECMAScript moderno já inclui a capacidade de iterar sobre NodeLists usando NodeList.prototype.forEach.
• Muitas vezes, a abordagem mais simples é a mais otimizada, melhorando a legibilidade e a manutenibilidade do código, alinhando-se ao princípio do menor esforço.
• Com a transpilação de código ES6 (por exemplo, através do Babel), você pode usar a sintaxe moderna, incluindo o operador de espalhamento, com confiança em todos os navegadores.
• Experimentar no console do navegador, testar abordagens e adaptá-las fornecerá a você a chave para uma compreensão mais profunda das ferramentas à sua disposição.

E lembre-se: as estratégias de codificação são amplamente determinadas pelos navegadores usados pelo seu público. Eles apresentam uma tela para a criatividade, então use-a sabiamente!

Recursos Úteis

1. NodeList - Web API | MDN — Tudo que você precisa saber sobre NodeList, incluindo como convertê-lo em um array.
2. Qual é a maneira mais rápida de converter NodeList em array em JavaScript? - Stack Overflow — Uma discussão sobre os métodos para converter NodeList em um array na comunidade de desenvolvedores.
3. Operador de Espalhamento (...) - JavaScript | MDN — Instruções para usar o operador de espalhamento ES6 para converter NodeList em array.
4. Array.from() - JavaScript | MDN — Documentação sobre como criar um novo array a partir de um objeto semelhante a array, como NodeList, usando Array.from().
5. Métodos de Array - JavaScript.Info — Uma discussão detalhada sobre como trabalhar com NodeLists e convertê-las em arrays.
6. NodeList: método forEach() - Web API | MDN — Uma explicação sobre como usar o método forEach() para NodeLists.
7. Especificação da Linguagem ECMAScript 2015 (ECMA-262 6ª edição) — Um documento normativo que detalha a funcionalidade de Array.from().

Video

Navigation