文档对象模型
DOM
高级网页文档对象模型（DOM）是浏览器把网页组织成节点树后，提供给程序读取和修改的页面结构。它让你能在不重新加载网页的情况下更新内容，例如把搜索结果加入列表。
你可能会说：「我想让搜索结果出来后直接显示在当前页面，不用每次都刷新网页。」
读之前建议先了解（这是一个高级概念）
动手看看搜索结果的 DOM 检查器
左边是节点树，右边是浏览器呈现的页面。悬停左侧节点或用 Tab 聚焦，再切换「选中节点」，看看树中的标题、列表和列表项分别对应页面哪里。
选中 ul 时，右边高亮的是整块结果列表；它下面的 li 才是一条条具体结果。DOM 用这种父子关系组织页面。
要点浏览器里的页面为什么能被程序修改？
- 1
浏览器把页面组织成节点树
浏览器读取网页内容后，会建立一棵包含元素、文字等节点的树。你可以把商品列表看成一个节点，它下面还有商品卡片、价格和按钮等节点；这种父子关系让程序能找到具体要改的位置。
- 2
程序能读取也能修改节点
JavaScript 可以通过浏览器提供的接口查找节点、读取内容，或增删节点。比如用户输入关键词后，程序把匹配的商品加入结果区；页面会随之更新，不必为了展示结果重新加载整页。
- 3
页面上的节点可能随时变化
DOM 反映的是浏览器中当前的页面结构，不一定和最初收到的 HTML 一样。比如一个弹窗起初不存在，点击按钮后才被加入页面。所以排查界面问题时，我们会看当下的节点，而不只看源文件。
容易混淆的地方
HTML 是描述网页内容的标记，DOM 是浏览器据此建立、并可继续修改的页面结构；改了 DOM，不等于改了服务器上的 HTML 文件。CSS 主要决定这些节点怎样显示，不负责把新商品加入列表。你和 AI 讨论“更新页面”时，可以据此说清是改结构、改内容，还是改样式。
什么时候用
适合用
- 做站内搜索时，结果返回后要在当前页面增删结果项、更新数量提示。
- 做后台表单时，用户选择不同选项后，要显示或隐藏对应的填写区域。
- 排查网页按钮点击后没反应时，检查目标节点是否存在、内容有没有变化。
不适合用
- 只是要把订单数据保存到服务器时，DOM 解决不了持久化；需要调用后端 API 并写入数据库。
- 开发原生手机应用的界面时，通常使用该平台的界面组件和视图系统，而不是网页 DOM。
- 只想修改网页颜色和间距、结构内容都不变时，重点是调整 CSS，而不是编写 DOM 操作。
练一练选一个答案，看看解释
你在做一个商品搜索页：用户输入关键词后，服务器返回结果，但页面仍显示旧商品。你会让 AI Agent 优先检查什么？
让 AI 帮你做复制给 AI Agent 直接用
请检查商品搜索页的结果更新流程：收到 API 返回的新商品后，找到当前页面的结果列表节点，替换旧商品项并更新结果数量。请说明你修改了哪些 DOM 内容；如果问题出在数据请求或 CSS，也请分别指出。