Entrar Ainda não tem acesso?
1
resposta

Dúvida sobre o comportamento de wrapping do Js e const botoes = document.querySelectorAll('.app__card-button');

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Aplicando áudio e estilos e atividade Adicionando e removendo classes

por Estudante
| 106.4k xp | 76 posts

Quando em aula o professor falou que usando const botoes = document.querySelectorAll('.app__card-button'); Estaríamos criando um "array" de botões isso me deixou confusa. Pesquisando a respeito achei a seguinte explicação: O resultado de document.querySelectorAll() é uma coleção de elementos chamada de NodeList. No entanto, embora seja semelhante a um array, um NodeList não é um array JavaScript nativo, e, portanto, não possui os métodos de array, como .forEach(), .map(), etc. o que me deixou ainda mais confusa pois usamos o método .forEach() mais a frente na mesma aula. Então pesquisando mais cheguei no conceito de "wrapping" ou "encapsulamento" de elementos, que para tornar a coleção de elementos NodeList em um array efetivamente precisaria usar Array.from() ou um loop. Então, usando o método forEach na função alteraContexto() estaríamos encapsulando essa NodeList?

1 resposta
por Ed Fernandes
| 75.7k xp | 42 posts

Quando você utiliza document.querySelectorAll('.app__card-button'), de fato, está obtendo uma coleção de elementos que é chamada de NodeList. Essa coleção se parece com um array, mas não é exatamente a mesma coisa. A principal diferença é que um NodeList não possui todos os métodos de array.

Quando você usa o método .forEach() em uma NodeList, não está encapsulando a NodeList em um array, mas sim aproveitando a capacidade do JavaScript moderno de aplicar métodos de array a objetos semelhantes a arrays, como o NodeList.

O que acontece nos bastidores é que o JavaScript permite que objetos como NodeList, HTMLCollection e outros implementem certos métodos de array, como .forEach(), para maior conveniência. Isso é chamado de "array-like" ou "array-ish".

No entanto, se você precisar de todos os métodos de array, incluindo aqueles que não são implementados por padrão em NodeList, como .map(), então você pode converter explicitamente a NodeList em um array usando Array.from() ou um loop, como você mencionou. Nesse caso, você estaria encapsulando a NodeList em um array para ter acesso a todos os métodos de array.

Então, em resumo, quando você usa .forEach() em uma NodeList, não está encapsulando, mas sim aproveitando a capacidade do JavaScript de trabalhar com objetos "array-like". Se precisar de todos os métodos de array, você pode converter a NodeList em um array usando Array.from() ou um loop.

espero ter ajudado. S2