# 任务管理系统——DOM操作与动态添加任务 教学设计
| **课题** | **任务管理系统——DOM操作与动态添加任务** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解 DOM 是浏览器对 HTML 文档的对象化表示，掌握查询元素、读取输入、创建元素、设置文本和追加节点的基本方法。
**技能目标**：能够在点击按钮后读取任务名称，动态创建任务列表项并添加到页面，同时清空输入框和阻止空任务。
**素养目标**：建立数据驱动界面和安全输出意识，养成优先使用 `textContent`、分步检查 DOM 操作的习惯。 |
| **教学重难点** | **重点**：元素查询；输入值读取；`createElement`；`textContent`；`append`。
**难点**：理解 JavaScript 对象与页面元素的对应关系，按正确顺序创建、设置和插入节点。 |
| **教学资源准备** | 上节课项目、DOM 树结构图、动态添加效果示例、代码步骤卡、浏览器元素面板和控制台。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 页面更新导入**
（5分钟） | 回顾按钮只能在控制台反馈的问题，提出把新任务真正显示到页面的需求。 | **现象演示**
点击按钮后控制台有信息但页面不变，提问：“程序怎样找到并修改页面？”
**任务发布**
明确本课完成“输入任务—点击添加—列表出现新项”。 | **问题分析**
指出需要读取输入框、找到列表并新增元素。
**步骤排序**
尝试排列查询、读取、创建、设置、插入五个动作。 | 从已有交互的缺口引出 DOM，建立清晰的操作目标和步骤预期。 |
| **2. DOM模型探究**
（10分钟） | 认识文档树、元素节点和 JavaScript 元素对象。 | **树形讲解**
把任务页面画成 DOM 树，说明父子关系和浏览器如何把标签转换为对象。
**查询示范**
使用 `querySelector` 获取输入框、按钮和列表，在控制台查看对象。 | **结构对应**
在 DOM 图中定位三个目标元素。
**查询练习**
根据 `id` 或类名写选择器并确认返回元素。 | 用 HTML 结构与对象一一对应，帮助学生理解“找到元素才能操作元素”。 |
| **3. 节点创建示范**
（8分钟） | 演示读取输入、创建列表项、设置文本和追加节点。 | **分步演示**
依次执行读取 `value`、`createElement("li")`、设置 `textContent`、追加到列表。
**安全说明**
比较 `textContent` 与直接拼接 HTML，强调用户输入应按文本处理。 | **代码跟随**
逐步输入并在每一步用控制台检查变量。
**顺序复述**
用自己的话说出创建节点的四步。 | 通过分步验证降低连续 DOM 操作难度，同时建立基础安全意识。 |
| **4. 添加功能实践**
（13分钟） | 完成动态添加、空值阻止、输入清空和焦点返回。 | **任务分层**
基础任务添加列表项；进阶任务使用 `trim()` 阻止空白输入，添加成功后清空并聚焦输入框。
**巡回指导**
检查选择器、事件函数、变量作用域和插入目标，指导用元素面板确认节点变化。 | **功能开发**
在原事件处理函数中整合校验与 DOM 创建。
**交互测试**
连续添加三项任务，测试空格输入、中文和较长文字，修复问题。 | 让学生完成系统首个核心可见功能，并用多类输入验证稳定性和用户体验。 |
| **5. 成果评价总结**
（4分钟） | 展示动态添加效果，归纳 DOM 操作流程。 | **作品点评**
检查是否存在空列表项、重复事件或输入未清空问题。
**流程总结**
概括“查询元素—读取数据—创建节点—设置内容—插入页面”。 | **成果演示**
现场添加任务并说明代码步骤。
**自查归档**
确认控制台无错误，页面节点数量正确。 | 用现场操作检验真实功能，形成可迁移的 DOM 修改流程。 |
## 板书设计
```text
DOM：HTML 在浏览器中的对象树
动态添加流程：
1. querySelector() 找元素
2. input.value 读数据
3. createElement() 建节点
4. textContent 设内容
5. append() 插页面
输入检查：trim()
成功后：清空 + focus()
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够查询页面元素并动态创建任务列表项，多数系统实现了空值阻止、添加后清空和焦点返回。元素面板帮助学生直观看到 DOM 节点变化。 |
| **教学反思** | 连续 DOM 步骤易造成变量混淆，应坚持每完成一步就输出或检查结果。部分学生倾向直接拼接 HTML，后续需持续强调用户输入使用 `textContent`，并通过特殊字符测试展示差异。 |