2
respostas

array pacientes retornando objetos html e não um array

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Remoção, Delegação e Animação e atividade Removendo pacientes

por Guilherme Mallmann
| 252.4k xp | 10 posts

Com o código passado pela aula:

var pacientes = document.querySelectorAll(".paciente");

pacientes.forEach(function(paciente) {
    paciente.addEventListener("dblclick", function() {
        this.remove();
    });
});

O meu navegador retorna:

TypeError: pacientes.forEach is not a function

Então eu tive que colocar:

Array.from(pacientes).forEach(function(paciente) {
    paciente.addEventListener("dblclick", function() {
        this.remove();
    });
});

Para funcionar.

Por que acontece isso?

2 respostas
por Rafael Rollo
| 496k xp | 755 posts
Alura Scuba Team

Fala Guilherme, tudo bem ?

Então. Testei por aqui e deu tudo certo. A função é reconhecida e o callback ao duplo click é executado normalmente.

Pesquisando pela função forEach vi que ela foi adicionada não faz muito tempo na especificação do ECMA Script. Pode ser um problema de compatibilidade do seu browser que está causando o problema com o código.

Veja aqui no MDN -> https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Compatibilidade

Eles até sugerem outras formas de escrita como a sua para contornar o problema.

Espero ter ajudado. Abraço!

por Douglas Quintanilha Barbosa Ferreira
| 363.4k xp | 215 posts

Olá Guilherme,

Sem entrar em detalhes muito técnicos, quando selecionamos elementos com a função document.querySelectorAll() ela na verdade nos retorna um NodeList, que é como se fosse um array mas de elementos do DOM.

Em geral você consegue utilizá-lo como um array normal, sem nem notar a diferença mas o que acontece é que alguns browsers mais antigos o objeto NodeList não tinha a função forEach, o que faz com que esse erro aconteça.

O Chrome e o Firefox por exemplo, já dão suporte ao forEach em NodeList desde 2016( se estão atualizados, obviamente), mas se você quer garantir a máxima compatibilidade, você pode percorrer o "array" utilizando um for comum como fizemos em momentos anteriores do curso.

Espero que tenha esclarecido sua dúvida, e por curiosidade, qual navegador você está utilizando ?