DOMParser.parseFromString返回空documentElement，是因为传入HTML片段时未提供合法解析上下文，且未显式指定'text/html'类型，导致浏览器静默降级或误走XML解析路径；正确做法是显式传入第二个参数，或改用template.innerHTML方案。
DOMParser.parseFromString 为什么总返回空 documentElement
不是 HTML 片段本身“坏了”，而是你没给它合法的解析上下文。DOMParser 默认按 text/html 解析，但若传入的是纯片段（比如只有 <div class="card"></div>），没有 <html>、<body> 包裹，某些浏览器（尤其是 Safari）会静默降级为创建一个空文档，document.documentElement 就是 null。
必须显式指定类型：new DOMParser().parseFromString(htmlStr, 'text/html') —— 漏掉第二个参数，它可能走 XML 解析路径，直接报错或返回异常结构。
- 服务端返回的 HTML 片段（如 CMS 接口、微前端子应用）几乎都不带
<html>头，别指望它能直接塞进 DOMParser 就工作 - 用
document.createElement('template')替代：设template.innerHTML = htmlStr，再取template.content.cloneNode(true)，这是唯一跨引擎稳定获取片段 DOM 的方式 - 如果非要用 DOMParser，先 wrap 一层标准壳：
'' + htmlStr + ''，再解析，最后只取doc.body.children
浏览器自动纠错后 DOM 结构和预期不一致怎么办
浏览器不是在“修复”你的 HTML，而是在执行 HTML5 parsing algorithm —— 它根据当前插入模式（in body / in table / in select）和开放元素栈做机械补全。比如 <div><p>text</div>，Chrome 会补成 <div><p>text</p></div>，Safari 可能拆成 <div></div><p>text</p>，Firefox 甚至把后续所有内容挂到第一个 <p> 下。
这种差异会让 document.querySelectorAll('.card > p') 在不同引擎返回不同数量，测试必然失败。
立即学习“前端免费学习笔记（深入）”；
- 永远别信源码里的标签嵌套 —— 打开开发者工具 Elements 面板，看实际渲染出的 DOM 树，那才是 selector 真正匹配的对象
- 跑一次 W3C Validator，重点修 “End tag for element X omitted” 和 “Element X not allowed as child of element Y” 类警告
- 表格结构尤其危险：
<table><tr><td></td></tr></table>看似合法，但浏览器可能自动注入<tbody>；重构时务必显式写出<tbody></tbody>
PostHTML 插件链怎么安全处理非法嵌套片段
PostHTML 本身不解析上下文，posthtml-parser 遇到 <p><div>xxx</p></div> 这类非法嵌套，会生成错乱 AST —— 后续插件 walk 节点时可能拿不到预期 parent 或 children，node.tag 或 node.attrs 访问直接 undefined。
不能跳过校验直接上插件，必须前置防御：
- 用
posthtml-parser单独 parse 输入，捕获error事件或检查返回的tree是否含type: 'comment'（说明 parser 已静默丢弃非法节点） - 禁用所有默认容错：传
{sync: true, skipParseErrors: false}给 parser，让它在非法嵌套处立刻 throw，而不是默默修 - 对
<script>和<style>节点加守卫：插件中先if (node.tag === 'script' || node.tag === 'style') return node;，避免正则误替换 JS 字符串里的</div>
重构后怎么验证 DOM 结构真的跨引擎一致
别用 document.querySelectorAll 断言数量或层级 —— 浏览器纠错逻辑不同，结果天然不一致。真正可靠的比对，必须绕过实时解析阶段。
唯一可行路径是用 <template> 做快照：
- 把待测 HTML 写进
template.innerHTML，它不渲染、不执行脚本、不加载资源，只存原始字符串 - 调用
template.content.cloneNode(true)获取纯净副本，在 Chrome/Firefox/Safari 中拿到完全一致的初始 DOM 树 - 比对前必做
el.normalize()：合并相邻文本节点，消除换行/空格处理差异导致的textContent不一致 - 只断言安全属性：
el.tagName、el.hasAttribute('id')、el.children.length、el.textContent.trim()；绝对不要碰offsetWidth或getBoundingClientRect()，那会把 layout 引擎差异引入结构断言
最易被忽略的一点：重构不是改完就提交，而是要把 <template> 快照 + normalize + 安全属性断言这整套流程，固化进 CI 的回归测试里 —— 否则下次有人手改 HTML，没人知道结构又悄悄偏移了。
