网页与程序协作
DOM
用程序读取和修改页面
免费阅读 · 配套小练习 · 更新于
一句话理解
浏览器把网页组织成一棵节点树，让程序能找到并更新元素。
打个比方
HTML 像家具清单，DOM 像浏览器里已经摆好的房间。程序可以找到标着“status”的位置，把那里显示的文字换掉。
DOM 是文档对象模型，提供访问节点的接口。JavaScript 可以按 id 等方式找到元素，读取或修改文本，也可以监听点击事件。脚本需要在目标元素存在后执行；找不到元素时，查找方法可能返回 null。
看个例子
<p id="status">还没开始</p>
<button id="start" type="button">开始学习</button>
<script>
const button = document.getElementById("start");
const status = document.getElementById("status");
button.addEventListener("click", () => {
status.textContent = "今天先学一个概念";
});
</script>观察 AI 的实现，可以分别找出按钮、目标段落、click 监听和 textContent 更新。这是放在 body 中的一种实现；它只更新当前页面，刷新后回到初始文字。需要保存进度时，应另外向 AI 说明。
什么时候会遇到
- 让 AI 为按钮添加反馈时，说清触发操作和要更新的内容。
- 检查 AI 实现的交互是否真的响应点击，刷新后是否符合预期。
常见误解
修改 DOM 不等于保存数据，也不一定修改了原始 HTML 文件。不要用 innerHTML 随意插入用户提供的文本。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：让 AI 实现按钮反馈，再亲自操作验证
使用自己的 HTML 练习页，把初始状态、操作和反馈分别写清楚。
试着这样告诉 AI
请在介绍页增加一个“开始学习”按钮和状态段落。初始文字为“还没开始”，激活按钮后改为“我正在学习 DOM”，刷新后恢复初始文字。保留现有内容，使用可由键盘操作的按钮，不保存学习进度。完成后指出事件监听和文字更新的位置。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把初始文字、按钮操作和刷新要求交给 AI。
- 在结果中找到按钮、状态段落与事件处理，结合上方例子理解页面如何变化。
- 实际点击，再用 Tab 选中按钮并按 Enter；刷新页面，检查三个行为是否分别满足要求。
你应该看到
鼠标与键盘都能激活反馈，刷新后回到初始状态。
完成检查
- 激活前后文字正确，没有只做一个没有响应的按钮。
- 键盘可操作，刷新后的状态符合约定。
遇到卡点？看提示
如果按钮没反应，把操作、报错和相关代码一起反馈给 AI；检查元素名称是否对应。
查看参考思路
按钮的事件处理更新状态段落；textContent 是其中一种实现。是否实现成功要看实际操作。刷新恢复初始状态是这次需求的一部分，不能把它解释为永久保存了进度。
想一想
把 id="start" 改成 id="begin"，只改 HTML 够吗？
查看答案
不够。脚本仍查找 start，会得到 null，后续监听失败。HTML 的 id 与脚本里的查找值需要对应。