Estava fazendo uns testes com o JavaScript e acabei me deparando com um "fenômeno" interessante, poremporém não consegui encontrar uma boa explicação para o mesmo em minhas buscas na internetexplicar.
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 pagarcapturar o paragrafo (<p>
) que possui o id="ponto"
usando o seguinte javascript.JavaScript:
let p1 = document.getElementById("ponto")
console.log(p1);
Nos não conseguimos oO resultado final sera nullserá null
, já que o javascript estaJavaScript está sendo carregado antes da criação do paragrafo(<p>
)parágrafo com id="ponto"
, pois o javascripttendo em vista que, nestenesse caso, estao script está sendo carregado no headna head
, e o paragrafoparágrafo, no body
OBS.: Eu sei que a formas de resolver isso usando algumas funções especificas como window.onload
ou DOMContentLoadedbody
, mas isso não vem ao caso agora certo!.
A questão aqui, por que não conseguimos pegar o id, mas conseguimos pegar a class.
simPor outro lado, se vocêtentarmos usar o código.:
let para = document.getElementsByClassName("Paragrafo")
console.log(para)
O javascript iraJavaScript irá retornar a classclass
, mesmo sendo chamadoexecutado antes dela, ou seja, quando o javascript foiJavaScript for executado, assim como o ID, a classclasse ainda não existia assim como o idno DOM. Então, então como rais o javascriptJavaScript consegue retornar a classe ?
Essa e minha duvida.
OBS.Observação: Sou novo nessa áreaSei que esse problema pode ser resolvido através de eventos específicos como window.onload
ou DOMContentLoaded
, comecei a estudar programação a 3 mesesmas isso não vem ao caso agora, então me perdoem sejá que a perguntas for meio bestaquestão é saber o motivo de conseguirmos pegar através da classe, mas não através do ID.