document.body为null是因为HTML结构未就绪，常见于脚本置于<head>中、重复<body>标签或服务端模板漏写<body>，导致DOM解析失败或body被浏览器静默丢弃。
body 标签不是可选的“包装盒”，而是浏览器渲染页面的强制起点——没有它，document.body 为 null，所有依赖它的脚本、样式、SEO 元素都会失效。
为什么 document.body 有时是 null？
这不是 JS bug，而是 HTML 结构没就绪。常见于：
- 脚本放在
<head>里且没加defer或async - 写了两个
<body>，浏览器静默忽略第二个，导致后续 DOM 解析错位 - 服务端模板拼接出错，比如条件渲染漏了
<body>开闭标签
验证方式很简单：console.log(document.body) 在控制台直接执行；若输出 null，说明结构已损坏，不是 JS 写错了。
body 标签里能放什么？
几乎所有可见元素都合法，但有隐含边界：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 可以放
<header>、<main>、<footer>、<div>、<p>、<img>、<script>（推荐放末尾）等 - 不能放
<html>、<head>、<title>、<meta>—— 这些必须在<body>外 - 旧属性如
bgcolor、text、leftmargin已被 HTML5 废弃，写上也不生效
例如：<body bgcolor="#fff"> 看起来像在设背景色，实际被忽略；正确写法是 CSS：body { background-color: #fff; }。
多个 body 标签会导致什么问题？
浏览器不会报错，但会按规范“修复”结构，结果往往比预期更糟：
- 第二个及之后的
<body>被丢弃或合并进第一个，导致 DOM 层级错乱 -
document.querySelector('body > .modal')找不到元素，因为那个.modal实际被塞进了<head>（解析器误判后移入） - CSS 的
body::before可能渲染两次，或完全不触发 - React/Vue 等框架挂载点
document.getElementById('root')若父容器意外落在“被吞掉”的 body 区域，初始化直接失败
检查方法：打开开发者工具 Elements 面板，手动搜索 <body，确认只出现一次且闭合完整。
真正难调试的不是语法错误，而是结构错位——它不报错、不中断执行，却让样式和脚本在某个环节悄悄失效。每次遇到奇怪的 document.body 为空、选择器失灵、滚动异常，先看 HTML 源码里 <body> 是否唯一、是否闭合、是否嵌套在 <html> 内。
