验证HTML文档结构合法性必须用组合手段交叉验证，主线程DOM检查+字符串静态分析+W3C标准校验三者缺一不可；浏览器自动纠错会掩盖非法嵌套、缺失根标签等问题，仅靠能否显示无法判断HTML结构合法性。
HTML 文档结构不合法，页面照样能显示——但这是浏览器在帮你擦屁股。真要验证合法性，不能只看渲染结果，得用组合手段交叉验证。
document.documentElement 为 null 怎么办
这是最硬的信号：HTML 根本没被解析成 DOM。常见原因不是代码写错了，而是服务端或加载链路出了问题：
- 服务器返回了
text/plainMIME 类型，而不是text/html - 响应体为空（比如 SSR 渲染失败、CDN 返回 204）
- 前端 fetch 后没设
response.text()就直接丢给DOMParser - 本地用
file://协议打开，某些浏览器会拒绝解析（W3C Validator 也会因此失效）
修复优先级：先确认网络面板里 Response Headers 的 Content-Type 是 text/html;charset=utf-8，再查服务端日志或构建产物是否真实输出了 HTML 内容。
Chrome DevTools Elements 面板里出现灰色/斜体节点
这些不是装饰，是浏览器静默修正的铁证。它意味着源码违反了 HTML 内容模型，比如：
立即学习“前端免费学习笔记（深入）”；
-
<p><div>xxx</div></p>→<div>会被移出<p>，在 Elements 中突然左对齐、无缩进 -
<code><script></script></code>→ 若没加type或defer，节点标灰并提示 “HTML validation warning”（需在 DevTools Settings → Console → Verbose 开启） -
<table><div></div></table>→<div>被提到<table>外，DOM 树断裂
注意：Elements 默认折叠空文本节点和注释，手动展开才能看清嵌套是否连贯；右键节点 → “Break on” → “Attribute modifications”，可捕获 JS 动态破坏结构的行为。
W3C Validator 报 Error 但页面能跑
这类报错必须修，不是“看着能用就不管”。W3C 不看渲染，只按标准比对源码，Error 意味着结构已违反 HTML5 规范：
-
Stray end tag：比如多写了</div>，或父标签提前闭合导致后续标签“漂浮” -
Element X not allowed as child of element Y：典型如<div>嵌在<p>里，或<header>放在<body>外 -
Bad value X for attribute Y：自定义属性没加data-前缀（status="loading"应为data-status="loading"）
粘贴代码时务必包含完整 <!DOCTYPE html> 至 </html>，否则报 “document has no root element”；含内联 <script> 时，若内容里有未转义的 < 或 &，会被截断，报 “unexpected token”，这不是标签问题，是字符转义漏了。
Node.js 环境下批量校验 HTML 字符串
别用正则匹配标签对——注释、CDATA、大小写混用都会崩。推荐 parse5 + html-validate 组合：
-
parse5可模拟浏览器解析逻辑，生成 AST，支持treeAdapter自定义校验钩子 -
html-validate支持 CI/CD 离线运行，规则可配：启用require-lang-attribute、valid-href等硬性项，关掉宽松规则 - 避免调 W3C API：依赖网络、限流、不稳定；且它只校验初始 HTML，不反映 JS 动态插入后的最终状态
真正容易被忽略的是上下文问题：比如 DOMParser 在 Web Worker 中解析字符串，返回的 documentElement 可能非 null，但它不执行浏览器纠错逻辑，结构与主线程实际 DOM 完全不一致——所以 Worker 只能做轻量静态分析（如 DOCTYPE 校验、标签配对粗筛），核心结构检查必须留在主线程。
