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.