AST重构HTML需理解语义意图，保留原生标签语义、属性绑定痕迹、文本节点边界；仅当节点无布局样式、无JS绑定且仅一个子节点时才可删嵌套；重写后须验证选择器匹配结果与无障碍树一致性。
直接用 AST 重构 HTML 结构，不是“把代码转成树再转回来”这么简单——它本质是让机器理解语义意图，再按规则重写 DOM 树。盲目替换标签或删嵌套，90% 的 case 会破坏 JS 绑定、CSS 选择器或无障碍逻辑。
AST 解析 HTML 时必须保留的三类节点信息
HTML AST（如 parse5 或 @html-eslint/parser 生成的）和 JS AST 不同，它必须显式保留：原生标签语义、属性绑定痕迹、文本节点边界。否则后续重写会丢失关键上下文。
-
class和id不能只当字符串处理——要识别是否被 JS 通过document.querySelector或事件委托引用（比如body.addEventListener('click', e => { if (e.target.classList.contains('btn')) ... })） -
data-属性必须原样保留，且需检查是否在 Vue/React 组件中被当作 prop 使用（如<MyCard data-id="123">） - 文本节点中的换行与空格要标记为
preserveWhitespace: true，否则<p>Hello<br>World</p>可能被误合并为"HelloWorld"
用 AST 找出真正可删的嵌套层
人工看 DOM 嵌套，容易把“看起来没用”的 <div class="wrapper"> 当成垃圾；但 AST 能识别它是否承载了 CSS Grid 容器、Flex 上下文，或是否被 :has() 选择器依赖。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 真正可删的嵌套 = 没有
display、position、overflow等布局相关样式，且父/子节点无 JS 事件监听器绑定到该层级 - 用 AST 遍历所有
Element节点，查node.attributes中是否有style或class，再查其 CSSOM 计算值（需配合 Puppeteer 或 Chrome DevTools Protocol 获取） - 示例判断逻辑：
if (!hasLayoutStyle(node) && !hasJSBinding(node) && node.children.length === 1) → 可提升子节点
重写后必须验证的两个硬性条件
AST 重写完 HTML，不能只比对字符串是否一致——要验证 DOM 行为是否等价。很多团队跳过这步，上线后发现表单提交失效、滚动锚点错位、屏幕阅读器读不出标题层级。
立即学习“前端免费学习笔记（深入）”；
- 重写前后，
document.querySelectorAll('nav ul li a')返回的 NodeList 长度和顺序必须一致（即使结构变了，选择器匹配结果不能变） - 所有含
tabindex、role、aria-的节点，在重写后仍需出现在无障碍树中——可用axe-core的await axe.run(document)自动检测 - 避免用正则替换 class 名（如
str.replace(/col-(\d+)/g, 'grid-col-$1')），AST 必须操作node.attributes对象，否则会破坏class="col-3 col-md-6 active"中的其他 token
AST 重构 DOM 的最大陷阱，不是解析不准，而是把 HTML 当成纯模板来处理——它其实是运行时行为、样式系统、辅助技术、JS 绑定的交汇点。任何脱离上下文的节点删除或标签替换，都可能在某个深夜报警里突然爆发。
