0

Eu estou tentando pegar um paragrafo especifico do meu documento html.

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <script src="script.js"></script>
        <title>Documento</title>
    </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>

Através do seu id (id = "ponto"), usando javascript.

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

Porem por algum motivo ele sempre me retorna null

inserir a descrição da imagem aqui

4
  • Se você seta o id não precisaria nem fazer essa função... apenas chama ponto
    – SylvioT
    29/05/2019 às 18:20
  • 8
    Você está tentando selecionar um elemento que ainda não existe no DOM, pois você carregou o JS no início do arquivo, antes dos elementos; por este motivo que é recomendado colocar os arquivos JS no final do HTML.
    – Woss
    29/05/2019 às 18:21
  • envolva o codigo do js em window.onload = function () { /* codigo aqui */ };
    – vik
    29/05/2019 às 18:22
  • 2
    Possível duplicada de Onde devo colocar um código JavaScript em um documento HTML?
    – Woss
    29/05/2019 às 18:28

1 Resposta 1

4

Olá,

Como alguns amigos já disseram aqui, você está tentando pegar um elemento que ainda não existe DOM, pois o que está dentro da tag body só é executado após a execução dos elementos do head. Existem algumas soluções simples para o seu problema. A primeira (mas não muito utilizada) é colocar a tag script após o body. Veja:

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <title>Documento</title>
    </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>

        <script src="script.js"></script>
    </body>
</html>



Outra solução é fazer seu código javascript aguardar a criação da window no DOM, utilizando a função window.onload. Está solução é mais arcaica do que a seguinte. Veja:

window.onload = function(){
    let p1 = document.getElementById("ponto")
    console.log(p1);
};



A solução mais "atualizada", é utilizando o DOMContentLoaded, um evento disparado quando todo o HTML for criado e analisado, sem aguardar o carregamento de Imagens, CSS e outros. Veja:

document.addEventListener("DOMContentLoaded", function(event){
    let p1 = document.getElementById("ponto")
    console.log(p1);
});



Espero ter ajudado, abraço!

2
  • 3
    Lucas, de onde veio a informação de que colocar o script no fim do body é menos utilizada, ou não "tão técnica"? E quanto a usar o evento DOMContentReady com HTMLElement.addEventListener(), não seria uma solução melhor do que usar o arcaico window.onload? 29/05/2019 às 19:04
  • 1
    Olá Fernando, o javascript é executado de modo síncrono, e colocá-lo na tag head garante que ele seja executado antes de qualquer elemento do body ser criado. Sim, o DOMContentReady é realmente mais apropriado, pois o load deve ser usado apenas para detectar quando a página está completamente carregada. Muito bem lembrado! 29/05/2019 às 19:17

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