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