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

这是我的简短 HTML 文档。

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

“未捕获的类型错误: 不能调用 null的方法‘ appChild’”？

<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>
143798 次浏览
小开
最佳答案

尸体还没有定义。通常，在执行使用这些元素的 javascript 之前，需要创建所有元素。在这种情况下，在使用 body的 head部分中有一些 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>

请参阅 demo 。

小开

或者加上这部分

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

浏览器自上而下地解析你的 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>
小开

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

这不是有效的 html，但是它会导致代码工作，因为浏览器太友好了;)

有关更多信息，请参见此答案 将 < script > 标记放在 标记之后是错误的吗？

因为这个原因，其他答案被否决。

小开

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

你可以做的是:

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

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

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

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

    将逻辑封装在 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>
小开

你需要把... 你的档案放在尸体标签的末尾

例如:

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

//-------------------------*** at here ***---------------------
        

<script src="...js">...</script>
</body>
</html>

提交答案