为什么document.body在我的javascript中为null

Why is document.body null in my javascript?

本文关键字：javascript 中为 null 我的 document body 为什么      更新时间：2023-09-26

这是我简短的HTML文档。

为什么Chrome控制台注意到这个错误：

"未捕获的类型错误：无法调用null的方法"appendChild"？

<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之前，您需要创建所有元素。在本例中，head部分中有一些使用body的javascript。不酷。

您希望将此代码包装在window.onload处理程序中，或者将其放置在<body>标记之后（如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>

请参阅演示。

您的脚本在加载body元素之前就已经执行了。

有几种方法可以解决这个问题。

  • 在DOM Load回调中包装代码：

    在DOMContentLoaded的事件监听器中封装您的逻辑。

    这样，回调将在加载body元素时执行。

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

    根据您的需要，您也可以将load事件侦听器附加到window对象：

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

    有关DOMContentLoaded和load事件之间的差异，请参阅此问题。

  • 移动<script>元素的位置，最后加载JavaScript：

    现在，您的<script>元素正在文档的<head>元素中加载。这意味着它将在body加载之前执行。谷歌开发人员建议将<script>标记移到页面末尾，以便在处理JavaScript之前呈现所有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>

将代码添加到onload事件中。接受的答案正确地显示了这一点，然而，该答案以及撰写本文时的所有其他答案也建议将脚本标记放在结束正文标记之后。

这不是有效的html。然而，它会导致您的代码工作，因为浏览器太善良了；）

查看此答案了解更多信息将<脚本>标记在<身体>标签

因此否决了其他答案。

或添加此部分

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

您需要将文件的<script src="...">...</script>放在body标签的末尾处：

<!DOCTYPE html>
<html lang="en">
        
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>you can see this</title>
        
       //-------------------------*** not here ***---------------------
        
    </head>
        
    <body>
        <div class="container">
            <div class="no">this is my dummy div1</div>
            <div class="no">this is my dummy div2</div>
            <div class="no">this is my dummy div2</div>
            <div class="no">this is my dummy div2</div>
        </div>
       
        //-------------------------*** here ***---------------------
        
        <script src="...js">...</script>
    </body>
</html>

Browser从上到下解析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>

document.body在代码运行时还不可用。

你可以做什么：

var docBody=document.getElementsByTagName("body")[0];
docBody.appendChild(mySpan);
相关文章：