domparser.parsefromstring返回空documentelement，是因为传入html片段时未提供合法解析上下文，且未显式指定'text/html'类型，导致浏览器静默降级或误走xml解析路径；正确做法是显式传入第二个参数，或改用template.innerhtml方案。
DOMParser.parseFromString 为什么总返回空 documentElement
不是 HTML 片段本身“坏了”，而是你没给它合法的解析上下文。DOMParser 默认按 text/html 解析，但若传入的是纯片段（比如只有 <div class="card"></div>），没有 、 包裹，某些浏览器（尤其是 Safari）会静默降级为创建一个空文档，document.documentElement 就是 null。
必须显式指定类型：new DOMParser().parseFromString(htmlStr, 'text/html') —— 漏掉第二个参数，它可能走 XML 解析路径，直接报错或返回异常结构。
- 服务端返回的 HTML 片段（如 CMS 接口、微前端子应用）几乎都不带
头，别指望它能直接塞进 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</p></div>，Chrome 会补成 <div><p>text</p></div>，Safari 可能拆成 <div></div>
<p>text</p>，Firefox 甚至把后续所有内容挂到第一个 <p></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>；重构时务必显式写出 <code><tbody></tbody>PostHTML 插件链怎么安全处理非法嵌套片段
PostHTML 本身不解析上下文，
posthtml-parser遇到<p></p> <div>xxx</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></script>和<style></style>节点加守卫：插件中先if (node.tag === 'script' || node.tag === 'style') return node;，避免正则误替换 JS 字符串里的
重构后怎么验证 DOM 结构真的跨引擎一致
别用
document.querySelectorAll断言数量或层级 —— 浏览器纠错逻辑不同，结果天然不一致。真正可靠的比对，必须绕过实时解析阶段。唯一可行路径是用
<template></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></template>快照 + normalize + 安全属性断言这整套流程，固化进 CI 的回归测试里 —— 否则下次有人手改 HTML，没人知道结构又悄悄偏移了。 - 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
