在前端开发中，有时候我们会遇到document.body为空的问题。这种情况通常发生在我们想要修改或操作DOM时。
什么是document.body？
在了解为什么document.body为空的问题之前，我们需要先了解一下document.body是什么。简单来说，document.body代表HTML文档中元素。它是DOM树中的一个节点，可以通过JavaScript代码来获取和操作它。
为什么document.body为空？
当我们在JavaScript代码中使用document.body时，通常是在HTML文档完全加载后才执行的。但是，在某些情况下，当我们试图访问document.body时，它可能会返回null或undefined。这种情况通常发生在以下几种情况下：
1. JavaScript代码放在标签中
如果我们将JavaScript代码放在标签中而不是标签中，那么当代码执行时，HTML文档尚未完全加载，此时document.body还不存在，因此我们无法获取它。
<!DOCTYPE html>
<html>
<head>
<script>
// 在<head>标签中调用document.body
console.log(document.body); // null
</script>
</head>
<body>
<!-- HTML内容 -->
</body>
</html>上面的代码尝试在标签中调用document.body，但由于HTML文档还未完全加载，因此会返回null。
2. JavaScript代码放在标签底部之外
如果我们将JavaScript代码放在标签底部之外，那么当代码执行时，HTML文档的元素尚未创建，此时document.body还不存在，因此我们无法获取它。
<!DOCTYPE html>
<html>
<head>
<!-- head内容 -->
</head>
<body>
<!-- HTML内容 -->
<script>
// 在<body>标签底部之外调用document.body
console.log(document.body); // null
</script>
</body>
</html>上面的代码尝试在标签底部之外调用document.body，但由于HTML文档的元素尚未创建，因此会返回null。
3. 异步加载JavaScript文件
如果我们通过异步加载JavaScript文件的方式来引入JavaScript代码，并且在加载完成前就尝试访问document.body，那么同样会出现document.body为空的情况。
<!DOCTYPE html>
<html>
<head>
<!-- head内容 -->
</head>
<body>
<!-- HTML内容 -->
<script>
// 异步加载JavaScript文件
var script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script);
// 尝试在异步加载完成前访问document.body
console.log(document.body); // null
</script>
</body>
</html>上面的代码尝试在异步加载完成前访问document.body，但由于JavaScript文件尚未加载完成，因此会返回null。
如何解决document.body为空的问题？
为了避免出现document.body为空的问题，我们需要确保JavaScript代码放在标签中，并且在标签底部。如果必须在标签中使用JavaScript代码，可以将代码包装在DOMContentLoaded事件处理程序中。这个事件会在HTML文档完全加载并解析后触发。
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 在DOMContentLoaded事件处理程序中调用document.body
console.log(document.body); // <body>...</body>
});
</script>
</head>
<body>
<!-- HTML内容 -->
</body>
</html>上面的代码使用DOMContentLoaded事件处理程序来确保在HTML文档完全加载后才访问document.body。这样就能避
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11637