一行偷懒代码如何把一个简单功能变成了递归 DOM 遍历器
来源：dev.to — 2026-07-24
📋 概述
作者想为 NotebookLM 构建一个 Chrome 扩展来提取和编辑 AI 回答内容，最初使用 innerText 来读取内容，但遭遇了格式混乱——引用标记（上角标按钮）导致文本断裂、删除节点后丢失段落分隔。经过三次重写才认识到：innerText 丢弃了文档结构信息。最终方案是手动递归遍历 DOM 树节点来保持语义结构。
🔑 核心要点
- 第一版用 innerText 提取内容，引用标记（上角标按钮）导致文本碎片化——每个编号自成一行
- 第二版删除引用按钮节点后 innerText 丢失了所有段落分隔，内容塌成一片
- 根本认知错误：innerText 告诉你文本看起来像什么，而非文本意味着什么
- 最终方案：递归 DOM 遍历——文本节点直接获取，块级元素插入换行，列表项保留结构
- 核心教训：扁平的文本输出永远无法还原被丢弃的语义结构
- 三次重写揭示了一个模式：同样的错误穿了不同的外衣——试图从扁平面粉重构煎饼
💡 金句
innerText 给你的是文本被压扁后的样子，而不是它意味着什么。我一直在试图把一个煎饼重新叠成立方体。
👍 0
👎 0
← 返回 Dev.to 首页