6

Estava fazendo uns testes com o JavaScript e acabei me deparando com um "fenômeno" interessante, porém não consegui encontrar uma boa explicação para o explicar.

Segue o código:

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <title>Documento</title>
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Titulo</h1>
        <p class="Paragrafo" id="ponto">Paragrafo 1</p>
        <p class="Paragrafo" >Paragrafo 2</p>
        <p id="p3">Paragrafo 3</p>
    </body>
</html> 

Se você tentar capturar o paragrafo (<p>) que possui o id="ponto" usando o seguinte JavaScript:

let p1 = document.getElementById("ponto")
console.log(p1);

O resultado será null, já que o JavaScript está sendo carregado antes da criação do parágrafo com id="ponto", tendo em vista que, nesse caso, o script está sendo carregado na head, e o parágrafo, no body.

Por outro lado, se tentarmos usar:

let para = document.getElementsByClassName("Paragrafo")
console.log(para)

O JavaScript irá retornar a class, mesmo sendo executado antes dela, ou seja, quando o JavaScript for executado, assim como o ID, a classe ainda não existia no DOM. Então, como o JavaScript consegue retornar a classe?

Observação: Sei que esse problema pode ser resolvido através de eventos específicos como window.onload ou DOMContentLoaded, mas isso não vem ao caso agora, já que a questão é saber o motivo de conseguirmos pegar através da classe, mas não através do ID.

1 Resposta 1

9

A razão para isso é simples. Diferente de um getElementById, que retorna um HTMLElement ou null, getElementsByClassName retorna um HTMLCollection, que é um objeto iterável, similar ao array padrão, mas com a diferença de que os HTMLCollection são atualizados pelo browser quando uma mutação ocorre no DOM.

Quando você utiliza getElementsByClassName antes do DOM ser carregado, você receberá uma lista vazia, mas conforme os novos elementos são carregados no DOM, essa lista é preenchida para você. Se em algum momento algum elemento for excluído ou adicionado ao DOM, essa lista será atualizada, como você pode ver no exemplo:

const paragrafos = document.getElementsByClassName('paragrafo');
const paragrafo2 = document.getElementById('paragrafo2');

paragrafo2.remove();
console.log(paragrafos); 
//A referência de paragrafo2 não existe mais no HTMLCollection "paragrafos"
<p id="paragrafo1" class="paragrafo">Paragrafo 1</p>
<p id="paragrafo2" class="paragrafo">Paragrafo 2</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .