DOM

云速成美站的自动排版检测机制通过遍历DOM树、计算各元素的实际渲染边界与预设安全区域进行比对来定位问题节点

Google Flights 的搜索结果和票价详情由大量动态加载的 DOM 元素构成，扩展通常通过内容脚本（content script）监听页面变化、抓取航班号、日期、票价和税费等字段。

在自动化语境中，agent 通常通过查询 DOM 节点、读取文本与属性来理解页面，而非依赖像素级渲染结果。

基于 DOM 的自动化脚本天然脆弱，因为现代网页应用大量使用动态渲染和混淆的类名，DOM 结构频繁变动，需要定期维护；若用于真实业务，仍需考虑官方 API 或更稳定的集成方案。

浏览器控制台注入是指开发者利用浏览器开发者工具中的 Console 面板直接执行 JavaScript 代码来操作当前页面的 DOM、监听事件或调用页面内已有的函数。

在浏览器中将点击的 DOM 节点反向映射回源码，通常需要借助 React/Vue 开发模式元数据、source map 或运行时注入标记。

更高效的 AI 原生交互应直接消费结构化数据（如 JSON、API 响应、DOM 树），或通过意图协议直接调度任务，从而绕开渲染—识别的中间层。

将评论钉在 DOM 元素而非截图像素上，使反馈带有可被程序解析的定位信息，这是与截图批注工具的本质区别。

若时钟需要独立交互或样式各异，DOM加合成层是比Canvas更直接的选择。

当同类动态元素数量达到数百个时，用DOM逐个建模会带来可观的节点数和样式计算成本；Canvas方案将500个时钟绘制到同一张画布上，只存在一个DOM节点，节点管理开销几乎为零，但失去DOM的可访问性、文本选中和CSS样式能力，事件命中检测需自行实现。

使用 document.currentScript.replaceWith() 可以将当前脚本元素替换为字符串或节点，实现就地渲染。

replaceWith() 是 DOM 标准中 ChildNode 接口的方法，接受一个或多个 Node 或字符串，用它们替换调用该方法的节点本身。

在没有响应式框架的情况下，开发者需要手动管理 DOM 更新；一种常见模式是维护全局状态对象，每次数据变更后调用渲染函数重新生成列表，数据量小时性能可接受，但数千条记录时可能需要虚拟滚动或分页。

尽可能保留原始DOM，哪怕删除空span都可能破坏布局；尽早规划内联标签的处理，剥离标签只是临时方案。

在替换段落文本时，正确做法是保留原元素，删除所有子节点后设置.text属性，而不是新建元素替换旧元素，这样才能保留标签、属性和尾文本。

修复方案是在DOM遍历过程中显式跟踪列表项内容列，根据父级列表标记计算每个块的必需缩进，并将缩进应用到围栏的每一行而不仅是第一行

浏览器渲染管道存在一条不变量：视觉呈现必须准确反映 DOM 树，并保持一致的高帧率（文中举例为 60 帧每秒）。

对于标签页、手风琴、"阅读更多"等交互组件，应当把文本留在 DOM 里用 CSS 隐藏，而不是点击时才加载，以确保 AI 爬虫可见。

UI 问题的根源（如 z-index 透明遮罩、事件委托、动态移除的点击处理器、CSS 层叠命中区域偏移）大多藏在 DOM 中，无法从像素截图中看出。

屏幕阅读器和纯键盘用户依赖 Tab 键按 DOM 顺序遍历可交互元素，视觉上的装饰性信封若被实现为无标签按钮，会成为发现阅读操作的唯一入口。