Document.body javascript'imde neden boş?

132

İşte benim kısa HTML belgem.

Chrome Konsolu bu hatayı neden not ediyor:

"Yakalanmamış TypeError:" appendChild "yöntemi çağrılamıyor 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
kaynak

Google Chrome kullanıyorum.

— John Hoffman

180

Vücut henüz bu noktada tanımlanmadı. Genel olarak, bu öğeleri kullanan javascript'i çalıştırmadan önce tüm öğeleri oluşturmak istersiniz. Bu durumda head, kullanan bölümde bazı javascript'leriniz varbody . Hiç hoş değil.

Bir Bu kodu sarmak istiyorum window.onloadişleyici veya yerleştirin sonra<body> (tarafından belirtildiği gibi etiketi 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>

Demoyu inceleyin .

— Sergio Tulentsev
kaynak

1

Teşekkür ederim ne demek istiyorsun Vücut etiketim yok mu?

— John Hoffman

5

Sayfa yukarıdan aşağıya okunur ve yol boyunca javascript yürütülür. Yürütülmekte olan headbölümde bazı javascript'leriniz var . Ama bodybelki de html'nin bir kısmı henüz indirilmedi bile. Veya indirilir, ancak bu noktada hala değerlendirilmemiştir. Yani DOM'da mevcut değil.

— Sergio Tulentsev

3

Ya başka bir dosyada tanımlanan mevcut bir yükün üzerine yazmak istemezseniz?

— Tom Brito

1

@TomBrito: "veya yerleştirin sonra<body> etiketi"

— Sergio Tulentsev

1

Biraz geç, ancak mevcut olanları değiştirmeden dinleyiciyi pencereye eklemek için addEventListener da kullanılabilir.

— edvilme

36

Komut dosyanız, bodyöğe yüklenmeden önce yürütülüyor .

Bunu çözmenin birkaç yolu var.

Kodunuzu bir DOM Yükü geri aramasına sarın:

Mantığınızı için bir olay dinleyicisine sarın DOMContentLoaded.

Bunu yaparken, bodyöğe yüklendiğinde geri arama çalıştırılacaktır .
```
document.addEventListener('DOMContentLoaded', function () {
    // ...
    // Place code here.
    // ...
});
```
İhtiyaçlarınıza bağlı olarak, alternatif loadolarak windownesneye bir olay dinleyicisi ekleyebilirsiniz :
```
window.addEventListener('load', function () {
    // ...
    // Place code here.
    // ...
});
```
DOMContentLoadedVe loadolaylar arasındaki fark için bu soruya bakın .
Öğenizin konumunu taşıyın <script>ve JavaScript'i en son yükleyin:

Şu anda, öğeniz belgenizin <script>öğesine yükleniyor <head>. Bu body, yüklenmeden önce yürütüleceği anlamına gelir . Google geliştiricileri<script> , JavaScript işlenmeden önce tüm HTML içeriğinin işlenmesi için etiketleri sayfanızın sonuna taşımanızı önerir .
```
<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>Some paragraph</p>
  

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

— Josh Crozier
kaynak

2

Bunun kabul edilen cevaptan daha kapsamlı ve güncel olduğunu düşünüyorum.

— theUtherSide

8

Kodunuzu onload olayına ekleyin. Kabul edilen yanıt bunu doğru bir şekilde gösterir, ancak bu yanıt ve yazarken diğer tüm yanıtlar, komut dosyası etiketinin kapanış gövde etiketinden sonra yerleştirilmesini önerir.

Bu geçerli html değil. Ancak, kodunuzun çalışmasına neden olur, çünkü tarayıcılar çok naziktir;)

Daha fazla bilgi için bu yanıta bakın <script> etiketini </body> etiketinin arkasına yerleştirmek yanlış mı?

Bu nedenle diğer yanıtları olumsuz oyladı.

— Martin Hansen
kaynak

4

Veya bu bölümü ekleyin

<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'den sonra, örneğin:

    <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
kaynak

1

Tarayıcı, html'nizi yukarıdan aşağıya ayrıştırır, betiğiniz body yüklenmeden önce çalışır. Betiği gövdeden sonra düzeltmek için.

  <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
kaynak

0

document.body kodunuz çalıştığında henüz kullanılamaz.

Bunun yerine ne yapabilirsiniz?

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

— Christophe
kaynak

@Jake daha spesifik olabilir misin? Çalışmadığı herhangi bir tarayıcı / sürüm örneği?

— Christophe

chrome @ 39 ve firefox @ 33

— Jake

@Jake tamam, bu yüzden yazarken cevabım doğruydu ;-) Beni uyardığın için teşekkürler, bazı testler yapacağım ve bir güncelleme göndereceğim.

— Christophe

Document.body javascript'imde neden boş?

Kodunuzu bir DOM Yükü geri aramasına sarın:

Öğenizin konumunu taşıyın <script>ve JavaScript'i en son yükleyin:

Öğenizin konumunu taşıyın `<script>`ve JavaScript'i en son yükleyin: