Por que document.body é nulo no meu javascript?

132

Aqui está o meu breve documento HTML.

Por que o Console do Chrome está notando este erro:

"TypeError não capturado: não é possível chamar o método 'appendChild' of null"?

<html>
<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">

        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>
</head>
<body>

</body>
</html>

javascript google-chrome

— John Hoffman
fonte

Estou usando o Google Chrome.

— John Hoffman

180

O corpo ainda não foi definido neste momento. Em geral, você deseja criar todos os elementos antes de executar o javascript que usa esses elementos. Nesse caso, você tem algum javascript na headseção que usa body. Não é legal.

Você deseja agrupar esse código em um window.onloadmanipulador ou colocá-lo após a <body>tag (conforme mencionado no e-bacho 2.0 ).

<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">
      window.onload = function() {
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");
      }

    </script>
</head>

Veja a demonstração .

— Sergio Tulentsev
fonte

1

Obrigado, como assim? Não tenho uma etiqueta corporal?

— John Hoffman

5

A página é lida de cima para baixo e o javascript é executado ao longo do caminho. Você tem algum javascript na headseção que está sendo executada. Mas bodyparte do html, talvez, ainda nem tenha sido baixada. Ou é baixado, mas ainda não foi avaliado neste momento. Portanto, ele não existe no DOM.

— Sergio Tulentsev 28/03

3

E se você não quiser substituir uma carga existente definida em outro arquivo?

— Tom Brito

1

@TomBrito: "ou coloque-o após a <body>tag"

— Sergio Tulentsev

1

Um pouco tarde, mas também pode usar addEventListener para anexar o ouvinte à janela, sem substituir os existentes.

— Edvilme

36

Seu script está sendo executado antes do body elemento seja carregado.

Existem algumas maneiras de solucionar isso.

Agrupe seu código em um retorno de chamada do DOM Load:

Agrupe sua lógica em um ouvinte de evento para DOMContentLoaded .

Ao fazer isso, o retorno de chamada será executado quando o bodyelemento for carregado.
```
document.addEventListener('DOMContentLoaded', function () {
    // ...
    // Place code here.
    // ...
});
```
Dependendo das suas necessidades, você pode anexar alternativamente um loadouvinte de evento ao windowobjeto:
```
window.addEventListener('load', function () {
    // ...
    // Place code here.
    // ...
});
```
Para a diferença entre the DOMContentLoadede loadevents, consulte esta pergunta .
Mova a posição do seu <script> elemento e carregue o último JavaScript:

No momento, seu <script>elemento está sendo carregado no <head>elemento do seu documento. Isso significa que ele será executado antes do bodycarregamento. Os desenvolvedores do Google recomendam mover as <script>tags para o final da sua página, para que todo o conteúdo HTML seja renderizado antes do processamento do JavaScript.
```
<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>Some paragraph</p>
  

  <script>
    
  </script>
</body>
</html>
```

— Josh Crozier
fonte

2

Eu acho que isso é mais completo e atual do que a resposta aceita.

— theUtherSide

8

Adicione seu código ao evento onload. A resposta aceita mostra isso corretamente, no entanto, essa resposta e todas as outras no momento da redação também sugerem colocar a tag de script após a tag de fechamento do corpo,.

Este não é um html válido. No entanto, seu código funcionará, porque os navegadores são muito gentis;)

Veja esta resposta para obter mais informações. É errado colocar a tag <script> após a tag </body>?

Votou outras respostas por esse motivo.

— Martin Hansen
fonte

4

Ou adicione esta parte

<script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>

após o HTML, como:

    <html>
    <head>...</head>
    <body>...</body>
   <script type="text/javascript">
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>

    </html>

— Boris Bachovski
fonte

1

O navegador analisa seu html de cima para baixo, seu script é executado antes do corpo ser carregado. Para corrigir colocar script após o corpo.

  <html>
  <head>
       <title> Javascript Tests </title> 
  </head>
 <body>
 </body>
  <script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>
</html>

— Emmanuel N
fonte

0

document.body ainda não está disponível quando seu código é executado.

O que você pode fazer:

var docBody=document.getElementsByTagName("body")[0];
docBody.appendChild(mySpan);

— Christophe
fonte

@ Jake, você poderia ser mais específico? Algum exemplo de navegador / versão em que não funciona?

— Christophe

chrome @ 39 e firefox @ 33

— Jake

@ Jake ok, então minha resposta estava correta no momento em que escrevi ;-) Obrigado por me avisar, vou fazer alguns testes e vou postar uma atualização.

— Christophe

Por que document.body é nulo no meu javascript?

Agrupe seu código em um retorno de chamada do DOM Load:

Mova a posição do seu <script> elemento e carregue o último JavaScript:

Mova a posição do seu `<script>` elemento e carregue o último JavaScript: