DOM、事件与表单交互
DOM 是浏览器为页面建立的可操作对象。事件发生后，脚本读取表单输入、更新任务数组，再根据数据刷新页面。
- 提交表单后能指出事件、输入值、任务数组和列表节点依次发生的变化。
- DOM 查询与页面元素对象
- 复现DOM、事件与表单交互后，应当提交表单后能指出事件、输入值、任务数组和列表节点依次发生的变化，并保留页面结构、不同宽度截图、控制台和元素状态作为可重复检查的依据。
- 完成 3.3「JavaScript：变量、函数与数据」
FOUNDATION
必须理解
浏览器把 HTML 变成可以被 JavaScript 读取的 DOM。事件发生时，脚本从页面取得输入，更新任务数据，再根据数据刷新显示。
本课依次讲清DOM 查询与页面元素对象、事件、表单提交与默认行为和根据数据更新界面，最后通过“接入完成按钮，测试多条任务、长标题与重复操作”检查学习结果。
DOM 像浏览器手里的页面目录。事件会告诉脚本用户动了哪一项，脚本查到对应元素，处理数据后再把结果写回目录中的位置。
用户提交任务表单后，脚本读取标题，调用新增函数，把结果放进 tasks 数组，再重新生成列表。空标题只显示提示，不写入数据。
DOM 查询与页面元素对象
querySelector 会按选择器找到页面元素。得到元素对象以后，脚本才能读取输入值、修改文字或设置属性。找不到时会得到空结果，所以选择器要和 HTML 对上。
基础概念
DOM（Document Object Model，文档对象模型）是浏览器根据 HTML 建立的对象结构。JavaScript 通过 DOM 查询元素并读取或修改当前页面。
进一步理解
`querySelector` 使用 CSS 选择器寻找第一个匹配元素。选择器写错或脚本运行太早时，查询结果可能为空。
元素对象提供 value、textContent 和属性等接口。修改它们会改变当前页面显示，却不会自动把数据长期保存。
脚本用 `#task-title` 找到输入框，读取 value 得到用户输入，再用 textContent 把标题放进新任务项。
HTML 文件是源文本，DOM 是浏览器解析后的当前对象结构。修改 DOM 不等于改写磁盘上的 HTML 文件。
这一小节记住：操作页面前先确认元素查询成功，并知道要读写哪个属性。
事件、表单提交与默认行为
事件监听让代码等待用户操作。表单提交有浏览器默认行为，preventDefault 可以在本页接管处理，但它不会自动完成校验或保存。
基础概念
事件表示用户或浏览器刚刚发生的操作。监听器把事件类型和处理函数连接起来，表单提交、按钮点击和输入变化都可以被观察。
进一步理解
表单提交可能触发页面导航。`preventDefault` 可以阻止这次默认动作，让脚本在当前页面处理输入。
处理函数应该先取得必要输入，再做校验和数据更新。出错时保留清楚提示，不让一次异常悄悄中断后续交互。
用户提交表单后，处理函数阻止刷新，读取标题。空标题显示错误，有效标题才进入新增任务函数。
点击事件属于某个按钮，提交事件属于整个表单。只监听按钮点击可能漏掉键盘回车提交。
这一小节记住：先选对事件，再让处理函数完成一条明确的数据路径。
根据数据更新界面
界面应该由当前任务数据生成。数据变化以后统一调用 render，能避免某些地方改了文字、另一些地方却还保留旧状态。
基础概念
数据驱动界面指页面显示由当前数据计算得到。数据变化后统一重新渲染，画面就不会和任务数组各记一套状态。
进一步理解
renderTasks 先读取 tasks，再为每条记录创建元素。列表为空时显示空状态，有内容时则显示任务和操作按钮。
写入用户提供的文字时使用 textContent。把原始输入交给 innerHTML 会让浏览器把其中的标签当作结构解析。
切换任务完成状态时，代码先更新 tasks 中对应记录，再调用 renderTasks。完成文字、样式和筛选结果都从新数据计算。
直接给一条 li 改 class 只改变画面；更新任务对象再渲染，才让数据与画面保持同一结果。
这一小节记住：事件改变数据，render 再让页面反映数据。
AI COLLABORATION
AI 如何参与
在DOM、事件与表单交互这一课，AI 负责根据真实材料解释DOM 查询与页面元素对象并指出遗漏，学习者负责控制范围、执行修改和核对页面结构、不同宽度截图、控制台和元素状态。
推荐协作顺序
- 1
先列出需要查找的元素和对应选择器。
- 2
只绑定提交事件，用控制台确认输入能被读到。
- 3
接入数据函数与 render，最后补失败状态和边界测试。
请根据这份 HTML 与任务函数，先画出表单提交后的五步数据流，再一次只接入一个事件。保留必要的控制台观察点，不重写现有函数。输出中说明怎样阻止默认提交、怎样验证数组更新，以及页面重新渲染的完成标志。
表单提交只走一条清楚的数据流。输入无效时有提示，有效时更新数组并重新渲染，用户输入不会被当成 HTML 执行；DOM、事件与表单交互的人工验收必须回到真实页面、请求、终端、测试或数据结果，不能用 AI 的文字说明代替。
人工检查清单
- 测试空格标题、连续提交、长标题和完成切换，并确认每次界面都与 tasks 数组一致。
- 让 AI 画出事件、输入、任务数组和渲染函数的调用顺序，并标出每一步可观察位置。
- 测试空格标题、长文字、回车提交和重复点击，核对用户输入始终作为普通文本显示。
COMMON TRAPS
常见误区
下面三类问题会让任务看似完成，却经不起刷新、错误输入或真实环境检查。先看现象，再找原因和修正方法。
只改页面不改数据
- 你会看到
- 眼前状态改变，下一次渲染又恢复原样
- 为什么发生
- 界面只是当前数据的显示结果，下一次渲染会用未更新的数据覆盖它。
- 怎样纠正
- 先更新任务数组，再由数据生成界面
忘记处理表单默认提交
- 你会看到
- 点击添加后页面突然刷新
- 为什么发生
- 浏览器会按表单规则导航或刷新页面，内存中的临时状态随之丢失。
- 怎样纠正
- 在提交监听器中明确处理默认行为
重复绑定事件
- 你会看到
- 一次点击新增两条或触发多次处理
- 为什么发生
- 同一个动作被多个监听器接收，每个监听器都会独立执行一次处理。
- 怎样纠正
- 确认初始化只运行一次，并检查监听器注册位置
HANDS-ON
动手任务
提交表单后能指出事件、输入值、任务数组和列表节点依次发生的变化。
- 完成 3.3「JavaScript：变量、函数与数据」
跟着做
- 01
查询表单、输入框、错误区域和列表，并检查结果。
- 02
监听 submit，阻止默认刷新后读取并整理标题。
- 03
为空标题显示提示，为有效标题调用 addTask。
- 04
实现 renderTasks，用 textContent 创建每条任务。
- 05
接入完成按钮，测试多条任务、长标题与重复操作。
提交表单后能指出事件、输入值、任务数组和列表节点依次发生的变化。
加入全部、未完成、已完成三个筛选按钮。筛选只改变显示范围，不删除原任务数据。
离开本课前，自问四件事
- HTML 文件与浏览器中的 DOM 有什么区别？
- 为什么表单应监听 submit，而不只监听按钮 click？
- 一次新增任务按什么顺序经过输入、数据和 render？
- 显示用户输入时为什么优先使用 textContent？
确认完成后，会同步更新学习中心的课程学习进度。