document.documentElement 为 null 表明 HTML 字符串未进入 DOM 解析流程，主因是 Content-Type 非 text/html、响应体为空或 innerHTML 赋值后未挂载到 document。
document.documentElement 为 null 就说明解析根本没发生
这不是结构“不完整”，而是 HTML 字符串压根没进 DOM 解析流程。常见原因有三个：Content-Type 不是 text/html、响应体为空、或前端用 fetch 拿到字符串后直接赋值给 innerHTML 却没挂载到 document 上。
验证方式很简单：打开 DevTools Console，执行 document.documentElement。返回 null 就确认失败。此时别急着查嵌套，先看 Network 面板的响应头和响应体。
若你在 SSR 或模板拼接场景中遇到该问题，重点排查：
• 输出是否被截断（比如漏了 <!DOCTYPE html>）
• HTML 字符串开头是否有 BOM 字符（\uFEFF）
• 是否在 document.write() 后又调用了 document.close() 导致重写中断
用 document.querySelector 精准定位语义节点是否存在
它不依赖渲染状态，只反映当前 DOM 树真实组织关系，适合快速验证关键容器是否按预期存在且唯一。
立即学习“前端免费学习笔记（深入）”；
常用检查项：
• document.head 和 document.body 必须同时非 null，缺一即结构断裂
• document.querySelector('main') 返回 null？说明语义主内容区域缺失
• document.querySelectorAll('nav').length > 1？可能误将辅助导航也标为 nav，违反语义唯一性原则
• document.querySelector('header nav') 比 document.getElementById('nav') 更能暴露嵌套逻辑问题——如果返回 null，可能是 nav 被错放在 footer 或独立于 header 存在
Elements 面板里灰色/斜体节点就是浏览器修过的证据
Chrome / Edge 的 Elements 面板显示的是“被修正后”的 DOM，不是你写的源码。这些视觉线索是结构非法最直接的提示：
• 灰色斜体的 </div>：原始代码漏写了闭合标签，浏览器自动补全
• 红色高亮的 </p>：被识别为 stray end tag，比如出现在 <section> 内部却提前闭合了父级 <p>
• 折叠节点旁带 …，点开发现 <div> 被移到 <p> 外：典型 <p><div>xxx</div></p> 嵌套错误，浏览器已重排
• 右键任意节点 → Break on → Subtree modifications：可捕获 JS 动态插入/移除导致的结构漂移，区分静态缺陷与运行时干扰
用 outline CSS 强制显形所有块级容器边界
肉眼无法判断 article 是否真被 main 包裹，或某个 aside 是否意外脱离文档流。一行 CSS 就能绕过样式干扰，直击结构问题：
执行这行代码：document.head.appendChild(Object.assign(document.createElement('style'), {textContent: 'article, section, main, header, footer, nav { outline: 2px solid #0088ff !important; }'}))
注意：
• 只作用于语义标签，避免用 * { outline: ... } 在大型 SPA 中卡顿
• 如果某个 section 的 outline 不连续或明显错位，大概率是父容器缺失、CSS display: contents 干扰，或 JS 把它 append 到了 document 下而非 body 内
• 配合禁用 JS 后重刷页面再加 outline，能排除动态操作带来的干扰，专注验证初始 HTML 结构
真正难的不是找到工具，而是理解每个信号背后对应的解析机制：灰色节点对应栈式解析器的自动补全行为，document.documentElement === null 对应 MIME 类型校验前置失败，outline 断续则往往指向 JS 对 parentNode 的误操作。这些细节一旦忽略，调试就会陷入“页面能显示，但结构不对”的死循环。
