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