文档对象模型DOM
你可能会说
点击新增后页面确实多了一条任务，但源 HTML 里找不到它，帮我确认运行时到底插入了什么。
DOM 是浏览器把网页文档表示成可读取和修改的节点树。例如源 HTML 里只有一个任务，点击“新增”后页面却多出一项，这是脚本创建节点并把它插入运行时 DOM 的结果。DOM 的变化会立即影响当前页面，但刷新后是否还在，取决于有没有另外保存到后端或浏览器存储。
也常被叫作Document Object Model文档对象模型树
源 HTML 怎样变成运行时 DOM 树
index.html
1
<ul id="tasks">2
<li>写周报</li>3
</ul>运行时 DOMul#tasks└─ li “写周报”
任务• 写周报
DOM 里新增节点会改变当前页面，但刷新后是否保留取决于有没有真正保存数据。
当前页面为什么会和源文件不同
浏览器先解析文档：浏览器读取 HTML，把文档中的元素、文字和属性组织成节点之间的层级关系，页面据此开始渲染。
脚本可以修改这棵树：点击按钮后，JavaScript 可以创建、删除或修改节点，所以 Elements 面板里的 DOM 可能已经不同于最初的 HTML 文件。
你可以这样告诉 AI Agent
请检查点击“新增”后运行时 DOM 是否插入了任务节点，并说明是哪段脚本完成的。再刷新页面确认这只是 DOM 更新还是已经持久保存；不要把当前页面出现节点当成数据库写入证据。
接下来学什么
延伸阅读 · 权威出处
快速练习