DOMParser 不校验嵌套合法性，而是静默修复；W3C Validator 是定位首个嵌套错误的唯一可靠方式；Chrome Elements 面板可暴露被浏览器移出的孤立节点；parse5 或 jsdom 支持可检测解析。
DOMParser 无法识别错误嵌套，它只会静默修复
DOMParser 的 parseFromString() 方法对 HTML 是宽容解析（lenient parsing）——它不校验嵌套合法性，而是按浏览器规则自动修正。比如你传入 <p><div>hello</div></p>，它返回的 DOM 中 <div> 已被移出 <p>，并补上一个空 <p></p>。你拿不到原始错误位置，也收不到任何提示。
这不是 bug，是设计使然：DOMParser 的目标是“生成可用 DOM”，不是“报告结构问题”。所以别指望靠它 catch 嵌套错误。
W3C Validator 是定位首个嵌套错误的唯一可靠方式
它不看渲染结果，只比对 HTML 规范中的 content model（内容模型）。粘贴 HTML 片段到 validator.w3.org，选 “Validate by Input”，它会明确报错：
Element div not allowed as child of element p-
Element img is not closed（即写了<img></img>） Element li not allowed as child of element div
优先修第一条 Error，后续很多 Warning 是连锁反应。忽略它，等于在修正后的 DOM 上打补丁，越修越偏。
立即学习“前端免费学习笔记（深入）”；
Chrome Elements 面板暴露被浏览器“踢出来”的孤立节点
真实 DOM 和你写的 HTML 不是一回事。打开 DevTools → Elements 面板，重点盯这三处：
- 灰色、半透明、缩进突兀的节点：大概率是被解析器挪出原父容器的元素（如
<ul><div></div></ul>中的<div>） - 右键任一节点 →
Edit as HTML，敲个空格回车：如果子树位置跳变，说明原始嵌套不合法 - 禁用所有 CSS 后检查布局：某块突然塌陷或错位，常因父容器被提前截断（如
<div><p>text</div></p>导致<div>提前闭合）
再执行这行代码快速揪出所有没爹的元素：document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el) })
用 parse5 或 jsdom 替代 DOMParser 做可检测解析
DOMParser 不可定制；而 parse5（纯 JS 解析器）支持传入自定义 errorHandler，能捕获规范级错误，例如：
unexpected-start-tag-in-table-context<br>end-tag-too-early-for-element
jsdom 则可在 Node.js 环境模拟完整解析流程，并通过 console.error 拦截警告。二者都允许你把错误当信号来处理，而不是等 DOM 生成完再倒推。
真正难的不是找到错误，而是接受：你写的 HTML 和浏览器最终构建的 DOM 是两套东西。验证必须回到规范本身，而不是在修正后的树上做逆向工程。
