JS获取body为null怎么办：解决脚本执行时机问题

一、问题复现与根本原因：DOM 解析流水线

当你在 HTML 的 <head> 中直接书写或引入 JavaScript 操作页面元素时，最容易出现此问题。例如以下常见结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
  <script>
    // 试图在 head 内直接获取 body 或操作样式
    console.log("document.body 结果:", document.body);
    document.body.style.backgroundColor = "#F8F7F3";
  </script>
</head>
<body>
  <h1>页面正文内容</h1>
</body>
</html>

浏览器在加载 HTML 时遵循单线程的“流式解析（Streaming Parser）”模型。解析器自文件首行向下逐个标记（Token）构建 DOM 树节点：

1. 解析到 <html> 与 <head>：在内存中创建 HTMLHtmlElement 与 HTMLHeadElement 节点。
2. 遇到普通 <script> 标签：浏览器必须暂停 HTML 解析器的运行。因为脚本内部可能包含 document.write() 等可能改变后续 HTML 结构的操作，浏览器选择优先下载并同步执行该脚本。
3. 执行脚本的当下：HTML 解析器停留在 <head> 区域，尚未触及后续的 <body> 标签。此时查询 document.body，DOM 树上对应的属性值自然为 null。
4. 脚本执行完毕后：解析器恢复工作，下移遇到 <body> 标签，此时才会在 document 上挂载 HTMLBodyElement 实例。

二、问题定位排查步骤

当在项目中遇到与 document.body 相关的 null 报错时，无需猜测，可按照以下逻辑链路顺次核查：

三、四种实用解决方案与代码实现

针对不同的代码组织形式（纯内联脚本、传统外链脚本、现代模块化脚本），解决该问题有四种标准工程实践。

方案 1：将 <script> 移至 </body> 闭合标签前

这是历史最悠久、兼容性最高且最符合直觉的方案。将脚本标签物理位置放置在页面所有可见 HTML 元素的最下方：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>方案1示例：后置脚本</title>
</head>
<body>
  <h1>页面标题</h1>
  <p>段落文本内容</p>

  <!-- 将脚本写在 body 内容的最底部 -->
  <script>
    // 此时浏览器已经完全解析了 <body> 及其上方所有子节点
    console.log("document.body 类型:", document.body.nodeName); // 输出: BODY
    document.body.style.backgroundColor = "#F8F7F3";
  </script>
</body>
</html>

机制解释：当解析器到达脚本标签时，<body> 元素已被实例化并载入文档树，因此无论内联还是外联，都能稳定访问 document.body。该方案对于小型页面和内联快速测试极为方便。

方案 2：为 <head> 内的外链脚本增加 defer 属性

如果你希望保持 <head> 统一引入外部资源的整洁结构，同时要求现代浏览器的首屏渲染性能，为 <script> 增加 defer 属性是标准的现代做法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>方案2示例：defer属性</title>
  <!-- defer 仅对外链脚本有效，内联 script 添加 defer 无效 -->
  <script defer src="app.js"></script>
</head>
<body>
  <h1>正文内容</h1>
</body>
</html>

对应 app.js 内部代码即可直接安全访问：

// app.js
console.log("defer脚本执行时，body存在状态:", document.body !== null);
document.body.classList.add("theme-light");

机制解释：defer 告诉浏览器“在后台异步下载脚本文件，但不要打断 HTML 的解析；等到整篇 HTML 解析完成（DOM 树构建完毕）之后、DOMContentLoaded 触发之前，再按书写顺序依次执行”。因此，执行时 document.body 必然早已准备妥当。

方案 3：使用 DOMContentLoaded 事件包裹逻辑

如果代码是写在 <head> 内的内联脚本（<script> 内部直接写 JS），或者你希望封装一个不依赖外界引入位置的独立通用逻辑库，监听 DOM 构建就绪事件是最佳解法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>方案3示例：DOMContentLoaded</title>
  <script>
    // 监听 DOMContentLoaded 事件，待 DOM 解析完成立即触发
    document.addEventListener("DOMContentLoaded", function () {
      console.log("DOMContentLoaded 回调触发，成功获取:", document.body);
      document.body.style.margin = "0";
    });
  </script>
</head>
<body>
  <main>页面主体结构</main>
</body>
</html>

方案 4：使用 ES 原生模块 (type="module")

在现代前端工程中，如果页面使用了浏览器原生支持的 ES Module 规范，通过设置 type="module"，浏览器会默认赋予该脚本类似于 defer 的延迟执行特性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>方案4示例：原生模块</title>
  <!-- 无论内联还是外链，type="module" 默认延迟到 DOM 解析完成后执行 -->
  <script type="module">
    console.log("ES Module 内部获取 body:", document.body);
    document.body.setAttribute("data-app-ready", "true");
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

四、方案对比与选型决策指南

在实际工程开发中，这四种方案各有适用的边界条件与权衡：

五、修复后的正确性验证

当实施上述任意一种方案后，可通过在浏览器控制台（F12 Console）中打印以下检测代码，验证脚本执行时机是否已经恢复正常：

// 验证脚本执行时 document.body 与 document.readyState
console.log("body 节点是否存在:", document.body !== null);
console.log("body 原型名称:", Object.prototype.toString.call(document.body));
console.log("当前文档解析状态:", document.readyState);

只要 document.readyState 为 "interactive" 或 "complete"，就表明文档已被充分解析，所有挂载在 document.body 上的操作均可稳健、安全地执行。