Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Aula 7 - O querySelectorAll retorna uma NodeList e não uma Array

Referente ao curso JavaScript: programando na linguagem da web

por Gregory José Vieira Russo
| 179.3k xp | 5 posts
Estagiário de Desenvolvimento

Olá,

Estou com problema na hora de excluir uma linha, quando realizo o querySelectorAll na classe 'paciente' está retornando isso:

NodeList [ <tr.paciente>, <tr.paciente>, <tr.paciente>, <tr.paciente>, <tr.paciente> ]

E por conta disso o meu forEach está dando esse erro:

TypeError: pacientes.forEach is not a function

Vou postar meu código aqui:

<main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" >
                            <td class="info-nome">Paulo</td>
                            <td class="info-peso">100</td>
                            <td class="info-altura">2.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">João</td>
                            <td class="info-peso">80</td>
                            <td class="info-altura">1.72</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">1.64</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente">
                            <td class="info-nome">Douglas</td>
                            <td class="info-peso">85</td>
                            <td class="info-altura">1.73</td>
                            <td class="info-gordura">24</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="paciente" >
                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>

            </section>
        </main>

E aqui está o código do meu remover-paciente.js:

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

console.log(pacientes);

O que estou errando? Como fazer com que o comando puxe uma array e não um NodeList? Muito obrigado!

7 respostas
por Daniel Artine
| 863.3k xp | 1180 posts
Instrutor Tech Lead

Oi Gregory.

Teria como você postar o código completo do seu remover-paciente.js?

por Gregory José Vieira Russo
| 179.3k xp | 5 posts
Estagiário de Desenvolvimento

Oi Daniel.

O código completo está assim:

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

console.log(pacientes);

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

Mas a minha dúvida ficou na questão do querySelectorAll, ele não deveria puxar uma array? Mesmo quando eu apago o forEach e realizo o texte com o console.log a variável pacientes continua sendo NodeList.

por Daniel Artine
| 863.3k xp | 1180 posts
Instrutor Tech Lead

Na verdade o retorno do querySelectorAll sempre é, por padrão, NodeList.

por Gregory José Vieira Russo
| 179.3k xp | 5 posts
Estagiário de Desenvolvimento

Entendi, então o erro não está no meu querySelector.

Existe algo errado no meu remover-paciente.js?

solução!
por Thiago Andrade
| 222k xp | 147 posts
Instrutor Desenvolvedor

Oi Gregory, blz?

O qureySelector realmente vai te retornar um NodeList. O que acontece que alguns browsers como o Chrome aceitam você iterar uma NodeList com o forEach. Nesse caso você pode converter ela para um array usando um spread operator do javascript. Ficaria assim: [...document.querySelectorAll('.paciente')]

Espero ter ajudado =)

por Daniel Artine
| 863.3k xp | 1180 posts
Instrutor Tech Lead

Seu remover parece certo, testei aqui e funcionou direitinho ;)

por Gregory José Vieira Russo
| 179.3k xp | 5 posts
Estagiário de Desenvolvimento

Boa tarde Thiago, no Chrome funcionou. Meu problema agora só está no Firefox.

Mas já está ótimo.

Muito obrigado!!!