document.documentElement为null说明HTML未进入DOM解析流程，常见于MIME类型错误、空响应或HTML字符串未正确挂载；需检查Content-Type、执行document.documentElement验证，并排查SSR截断或BOM字符。
document.documentElement 为 null 就说明结构根本没解析
这不是“结构不完整”，而是压根没进 DOM 解析流程。常见于服务器返回了 text/plain MIME 类型、响应体为空、或前端用 fetch 拿到 HTML 字符串后没正确插入（比如直接赋值给 innerHTML 但没挂载到 document）。
检查三件事：
• 看 Network 面板响应头里 Content-Type 是否为 text/html
• 在 Console 执行 document.documentElement，返回 null 就确认失败
• 若是 SSR 或模板拼接场景，检查输出是否被截断（比如 <!DOCTYPE html> 没写全，或开头有 BOM 字符）
W3C Validator 报 Error 必须修，Warning 可暂缓但别忽略
它只校验原始 HTML 字符串，不看 JS 渲染结果。报 Error 意味着违反 HTML5 规范，不是“浏览器能显示就没事”：
• Stray end tag：多写了 或父标签提前闭合，导致后续内容漂浮在 DOM 根下
• Element div not allowed as child of element p：典型嵌套错误，<p><div>xxx</div></p> 是非法的
• Bad value loading for attribute rel：写成 <link rel="loading"> 而不是标准值 preload/prefetch
粘贴代码时务必包含完整 <!DOCTYPE html> 到 </html>，否则会误报 “document has no root element”
Chrome DevTools Elements 面板里灰色/斜体节点就是浏览器偷偷修过的证据
Elements 显示的是最终 DOM 树，不是源码。灰色、斜体、带删除线的节点，代表被静默修正过：
• <p><div>xxx</div></p> →
，在 Elements 中突然左对齐、无缩进
• <script>console.log(1)</script> 缺 type 或 defer → 节点标灰，Console 提示 “HTML validation warning”（需在 DevTools Settings → Console → Verbose 开启）
• 手动展开空文本节点和注释，才能看清嵌套是否连贯
• 右键任意元素 → “Break on” → “Attribute modifications”，可捕获 JS 动态破坏结构的行为
document.querySelectorAll('*').forEach(el => !el.parentElement && console.warn('orphan:', el))
这行代码能揪出真正游离的节点 —— 它们不在任何 parent 下，但又挂在 document 上。常见于：
• React hydrate 失败，所有节点被 append 到 document 而非 body
• JS 执行了 document.removeChild() 却没调用 el.remove() 或销毁引用
• 模板引擎输出了未包裹在 <body> 内的 HTML 片段
执行后若输出 orphan:，说明结构断裂已发生，且浏览器没自动修复（比如没 parent 的 <div> 直接写在 <html> 外）
立即学习“前端免费学习笔记（深入）”；
真实验证必须交叉比对：W3C 校验器看源码合规性，DevTools 看运行时 DOM 状态，document.documentElement 和 document.body 是最轻量的运行时快检手段。三者结论不一致时，问题往往出在服务端输出、客户端动态注入或框架 hydration 过程中。
