DOM 快照（DOM Snapshot）
浏览器在某一时刻的页面结构序列化结果，让不直接看屏幕的 Agent 也能理解并操作页面。
生产方式：人写签发：晓黎学习复核：2026年9月21日被 0 个词条引用
一句话定义
DOM 快照 = 把浏览器当前页面的 DOM 树序列化成一份结构化文本或对象，使 Agent 能「读到」页面长什么样、有哪些可操作元素。
为什么需要它
模型看不到屏幕。要让 Agent 操作网页，必须把页面状态转换成它能理解的形式。三条常用路径：
| 形式 | 内容 | 优点 | 缺点 |
|---|---|---|---|
| 截图 | 像素图 | 直观，保留视觉信息 | 模型难精确定位元素坐标 |
| DOM 快照 | 结构化节点树 | 精确、可定位、体积可控 | 丢失视觉样式与布局观感 |
| 可访问性树 | 语义角色与标签 | 语义清晰，靠近无障碍标准 | 信息少于完整 DOM |
实践中常组合使用：DOM 快照负责精确定位与操作，截图负责验证视觉结果。
快照里通常包含什么
- 节点类型（元素、文本、按钮、输入框）
- 可读文本与属性
- 可交互标志（能否点击、是否可编辑）
- 稳定的元素标识（id、data-testid、可访问性标签）
- 层级关系
一个实用的裁剪原则：只保留可操作和可理解的部分。完整的 DOM 往往包含大量脚本、样式和框架内部节点，直接全量喂给模型既浪费上下文又引入噪声。
在 Agent Harness 中的位置
DOM 快照属于上下文层的一种输入源。它的产物进入 Prompt 装配，供模型决策；它的生成过程属于工具或运行时能力。
| 关注点 | 归属 |
|---|---|
| 如何获取页面状态 | 工具（如浏览器控制工具） |
| 如何裁剪与序列化 | 工具内部实现 |
| 如何注入模型上下文 | Prompt 装配（第 03 讲） |
| 如何记录与复现 | 事件日志（第 04 讲） |
关键设计点
- 稳定性优先：快照中的元素标识必须在页面重渲染后保持稳定，否则 Agent 的操作会「打偏」。
- 体积控制：大页面的完整 DOM 可能数万节点，必须裁剪或分页，否则撑爆上下文。
- 时效性：快照是某一时刻的切片。页面变化后旧快照失效，需要重新获取。
- 与操作配对：每次操作后应重新获取快照，确认操作生效，而不是假设成功。
与相邻概念的区别
| 概念 | 关系 |
|---|---|
| DOM | 页面结构的运行时表示；快照是它的一次序列化 |
| 可访问性树 | 更偏语义，适合理解；DOM 快照更偏操作 |
| 页面上下文（page context） | 更宽泛，可能包含路由、标题、标签页等；快照是其中一种 |
相关
- Agent认知闭环（Agent Cognitive Loop） — 快照属于感知层输入
- Context Engineering（上下文工程） — 快照是上下文的一种来源
- Harness Engineering（代理治理工程） — Harness 决定快照如何进入模型
- 第 17 讲 可观测性
来源
- OpenAI. "Harness Engineering: Leveraging Codex in an Agent-First World". 2026-02-11. 文中提到将 Chrome DevTools Protocol 接入 agent 运行时，并创建处理 DOM 快照、截图和导航的 skills。
- 本地存档：OpenAI Harness Engineering
互链
链接来自概念卡正文里的双链，编译时能解到本期词条集的才成为站内链接。
反链（0）
还没有其它词条引用这一页。
出处
路径是本地知识库（Obsidian 库）里的位置，正文与概念卡逐字对应。
- 概念卡原文DOM 快照（DOM Snapshot）
03_RESOURCES/概念/dom-快照.md - 所属知识地图栏目概念页索引 · Agent 架构与 Harness 治理
03_RESOURCES/概念/Index.md - 正文引用的知识库笔记第 17 讲 可观测性
02_AREAS/AI开发/Harness Engineering/Agent Harness 课程/17-可观测性：如何知道系统正在发生什么.md - 正文引用的知识库笔记OpenAI Harness Engineering
02_AREAS/AI开发/Harness Engineering/OpenAI - Harness Engineering Leveraging Codex in an Agent-First World.md
编译入库：2026年10月6日。词条由知识库编译而来， 修正要回到概念卡改，再重新编译。