类型错误：document.body 为空

Posted

技术标签:

【中文标题】类型错误：document.body 为空【英文标题】：TypeError: document.body is null 【发布时间】：2015-03-06 03:41:45 【问题描述】：

为什么我在浏览器中出现错误？

TypeError: document.body 为空

代码在JSfiddle 中运行良好。

HTML

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jsscript.js"></script>
</head>
<body>
</body>

JS

var creElem = document.createElement("p");
creElem.innerhtml = "Hellow World";
creElem.setAttribute("id", "id_name");
document.body.appendChild(creElem);

【问题讨论】：

JSFiddle 在页面加载后运行你的脚本。 （左侧面板中的“onLoad”） @MichaelPerlakowski 是否可以通过 观察MutationObserver 的变化？？ 【参考方案1】：

在 DOM 加载时执行代码。将您的逻辑封装在 DOMContentLoaded 的事件侦听器中。

document.addEventListener('DOMContentLoaded', function () 
    // ...
);

它在 JSFiddle 中工作的原因是因为 JS 在加载时执行（这是 JSFiddle 中的默认选项）。

或者，根据您需要执行逻辑的时间，您还可以使用：

window.addEventListener('load', function () 
    // ...
);

见：Difference between DOMContentLoaded and Load events

【讨论】：

是否可以通过MutationObserver 观察 的变化？？【参考方案2】：

您的document.body 尚未创建或尚不存在。如果您想将 child 附加到 document.body 或在您的 javascript 中对 document.body 执行任何操作，请将您的 javascript 代码或 js 文件的链接放在 body 标记的末尾。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="jsscript.js"></script>
    </body>
</html>

【讨论】：

以上是关于类型错误：document.body 为空的主要内容，如果未能解决你的问题，请参考以下文章

如何修复 document.body 为空错误

浏览器使用js滚动

document.body.scrollTop用法

各种宽高

屏幕各种宽高

document.documentElement.clientHeight 和 document.body.clientHeight