मेरे जावास्क्रिप्ट में डॉक्यूमेंट क्यों है?


132

यहाँ मेरा संक्षिप्त HTML दस्तावेज़ है।

Chrome कंसोल इस त्रुटि को क्यों देख रहा है:

"बिना पढ़ा हुआ टाइपर: कॉल विधि '' एपेंडचाइल्ड 'नहीं है 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>

मैं Google Chrome का उपयोग कर रहा हूं।
जॉन हॉफमैन

जवाबों:


180

इस बिंदु पर अभी तक शरीर को परिभाषित नहीं किया गया है। सामान्य तौर पर, आप इन तत्वों का उपयोग करने वाली जावास्क्रिप्ट निष्पादित करने से पहले सभी तत्वों को बनाना चाहते हैं। इस मामले में आपके पास headउपयोग करने वाले अनुभाग में कुछ जावास्क्रिप्ट हैbody । अछा नहीं लगता।

तुम एक में इस कोड को रैप करने के लिए चाहते हैं window.onloadहैंडलर या यह जगह के बाद<body> टैग (के रूप में उल्लेख ई-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>

डेमो देखें


1
धन्यवाद, आपका क्या मतलब है? क्या मेरे पास बॉडी टैग नहीं है?
जॉन हॉफमैन

5
पृष्ठ को ऊपर से नीचे और रास्ते में निष्पादित जावास्क्रिप्ट से पढ़ा जाता है। आपके पास headअनुभाग में कुछ जावास्क्रिप्ट है जिसे निष्पादित किया जा रहा है। लेकिन bodyhtml का हिस्सा, शायद, अभी तक डाउनलोड नहीं किया गया है। या इसे डाउनलोड किया गया है, लेकिन इस बिंदु पर अभी भी इसका मूल्यांकन नहीं किया गया है। इसलिए यह DOM में मौजूद नहीं है।
सर्जियो तुलेंत्सेव

3
क्या होगा यदि आप किसी अन्य फ़ाइल में परिभाषित मौजूदा ऑनलोड को ओवरराइड नहीं करना चाहते हैं?
टॉम ब्रिटो

1
@TomBrito: "या यह जगह के बाद<body> टैग"
सर्जियो Tulentsev

1
थोड़ा देर से, लेकिन मौजूदा लोगों की जगह के बिना, श्रोता को खिड़की से जोड़ने के लिए addEventListener का उपयोग कर सकता है।
edvilme

36

आपकी स्क्रिप्ट के पहले निष्पादित किया जा रहा है bodyतत्व लोड ।

इसको हल करने के लिए कुछ तरीके हैं।

  • DOM लोड कॉलबैक में अपना कोड लपेटें:

    के लिए एक घटना श्रोता में अपने तर्क लपेटें DOMContentLoaded

    ऐसा करने पर, bodyतत्व के लोड होने पर कॉलबैक निष्पादित किया जाएगा ।

    document.addEventListener('DOMContentLoaded', function () {
        // ...
        // Place code here.
        // ...
    });

    अपनी आवश्यकताओं के आधार पर, आप वैकल्पिक रूप से एक loadईवेंट श्रोता को windowऑब्जेक्ट से जोड़ सकते हैं :

    window.addEventListener('load', function () {
        // ...
        // Place code here.
        // ...
    });

    घटनाओं DOMContentLoadedऔर loadघटनाओं के बीच अंतर के लिए , इस प्रश्न को देखें

  • अपने <script>तत्व की स्थिति को आगे बढ़ाएँ, और जावास्क्रिप्ट को अंतिम रूप से लोड करें:

    अभी, आपके <script>तत्व को <head>आपके दस्तावेज़ के तत्व में लोड किया जा रहा है । इसका मतलब यह है कि इसे bodyलोड किए जाने से पहले निष्पादित किया जाएगा । Google डेवलपर्स<script> आपके पृष्ठ के अंत में टैग को स्थानांतरित करने की सलाह देते हैं ताकि जावास्क्रिप्ट संसाधित होने से पहले सभी HTML सामग्री प्रदान की जाए।

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
      <p>Some paragraph</p>
      <!-- End of HTML content in the body tag -->
    
      <script>
        <!-- Place your script tags here. -->
      </script>
    </body>
    </html>

2
मुझे लगता है कि यह स्वीकृत उत्तर की तुलना में अधिक गहन और वर्तमान है।
TheUtherSide

8

अपने कोड को ओनलोड घटना में जोड़ें। स्वीकृत उत्तर इसे सही ढंग से दिखाता है, हालांकि यह उत्तर और साथ ही साथ लेखन के समय अन्य सभी भी समापन टैग के बाद स्क्रिप्ट टैग लगाने का सुझाव देते हैं,

यह मान्य HTML नहीं है। हालांकि यह आपके कोड को काम करने का कारण बनेगा, क्योंकि ब्राउज़र बहुत दयालु हैं;)

अधिक जानकारी के लिए यह उत्तर देखें </ body> टैग के बाद <script> टैग को रखना गलत है?

इस कारण से अन्य उत्तर दिए गए हैं।


4

या इस भाग को जोड़ें

<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 के बाद, जैसे:

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

1

ब्राउज़र आपके html को ऊपर से नीचे की ओर खींचता है, आपकी स्क्रिप्ट बॉडी लोड होने से पहले चलती है। शरीर के बाद स्क्रिप्ट को ठीक करने के लिए।

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

0

document.body अभी तक उपलब्ध नहीं है जब आपका कोड चलता है।

आप इसके बजाय क्या कर सकते हैं:

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

@ जेक आप और अधिक विशिष्ट हो सकता है? ब्राउज़र / संस्करण का कोई भी उदाहरण जहां यह काम नहीं करता है?
क्रिस्टोफ

chrome @ 39 और फ़ायरफ़ॉक्स @ 33
जेक

@ जेक ठीक है, इसलिए मेरा उत्तर लिखने के समय सही था;; मुझे सचेत करने के लिए धन्यवाद, मैं कुछ परीक्षण करूँगा और एक अद्यतन पोस्ट करूँगा।
क्रिस्टोफ़
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.