teaching-design/data/Web/16.md

任务管理系统——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 修改流程。

板书设计

DOM：HTML 在浏览器中的对象树

动态添加流程：
1. querySelector()  找元素
2. input.value      读数据
3. createElement()  建节点
4. textContent      设内容
5. append()         插页面

输入检查：trim()
成功后：清空 + focus()

教学成效与反思

教学成效	学生能够查询页面元素并动态创建任务列表项，多数系统实现了空值阻止、添加后清空和焦点返回。元素面板帮助学生直观看到 DOM 节点变化。
教学反思	连续 DOM 步骤易造成变量混淆，应坚持每完成一步就输出或检查结果。部分学生倾向直接拼接 HTML，后续需持续强调用户输入使用 textContent，并通过特殊字符测试展示差异。