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

javascript google-chrome

2022-08-30 02:21:49

这是我的简短HTML文档。

为什么 Chrome Console 会注意到此错误：

“未捕获的类型错误：无法调用”？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>

答案 1

此时尚未定义身体。通常，您希望在执行使用这些元素的javascript之前创建所有元素。在本例中，您在使用 .不酷。headbody

您希望将此代码包装在处理程序中或将其放在标记之后（如 e-bacho 2.0 所述）。window.onload<body>

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

请参阅演示。

答案 2

您的脚本甚至在元素加载之前就被执行了。body

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

将代码包装在 DOM 加载回调中：

将逻辑包装在的事件侦听器中。DOMContentLoaded

这样，将在元素加载后执行回调。body
```
document.addEventListener('DOMContentLoaded', function () {
    // ...
    // Place code here.
    // ...
});
```
根据您的需要，也可以将事件侦听器附加到对象：loadwindow
```
window.addEventListener('load', function () {
    // ...
    // Place code here.
    // ...
});
```
有关和事件之间的区别，请参阅此问题。DOMContentLoadedload
移动元素的位置，最后加载 JavaScript：<script>

现在，您的元素正在加载到文档的元素中。这意味着它将在加载之前执行。Google 开发人员建议将代码移到网页末尾，以便在处理 JavaScript 之前呈现所有 HTML 内容。<script><head>body<script>
```
<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>Some paragraph</p>
  

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

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

将代码包装在 DOM 加载回调中：

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

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