《JavaScript前端开发程序设计项目式教程》教学设计17.项目6 DOM节点的创建、复制与删除

课程教学设计课程名称本课名称所授章节项目6商品放大镜——DOM对象授课对象选用教材《JavaScript前端开发程序设计项目式教程》课时数2【学情分析】知识基础学生已能操作现有DOM元素，但对于如何在运行时动态地向页面中“注入”全新的内容（创建节点）、复制现有内容（克隆节点）或清理不需要的内容（删除节点）缺乏了解。能力基础能够修改页面，但无法实现内容的动态增删，如评论列表、购物车商品增减等功能。素养基础渴望掌握构建动态、可交互Web应用的完整能力，对实现内容的动态管理有强烈需求。【教学目标】知识目标1.掌握使用document.createElement()、createTextNode()创建新节点的方法。

2.掌握使用appendChild()、insertBefore()将节点插入DOM树的方法。

3.掌握使用cloneNode()复制节点和replaceWith()替换节点的方法。

4.掌握使用remove()方法删除节点。能力目标1.能够根据用户操作或数据变化，动态地向页面中添加新的元素。

2.能够实现如“添加评论”、“复制表单”、“删除列表项”等常见交互功能。素养目标1.培养动态内容管理和内存管理的意识。

2.提升构建完整Web应用的功能模块能力。【教学分析】内容分析本课完成了DOM操作的“增、删、改、查”闭环。重点在于让学生掌握如何主动地、动态地改变DOM树的结构，而不仅仅是修改现有节点的属性。这是实现现代Web应用动态性的核心。重点createElement

+

appendChild

创建并添加节点；remove()

删除节点；cloneNode(deep)

深/浅复制。难点理解insertBefore的参考节点参数；掌握cloneNode的deep参数对复制行为的影响。【教学策略和方法】教学策略采用“问题情境驱动-分步技能解锁-综合任务挑战”的教学策略。以“待办事项列表”这一经典应用场景贯穿始终，让学生在解决真实问题的过程中，自然习得各项DOM操作技能。教学方法任务驱动法、演示法、案例教学法、小组协作法。【课程思政】本课课程思政元素工程规范、效率意识、责任担当。切入方法与举措1.工程规范：强调应优先使用标准的DOMAPI（如createElement）来构建动态内容，而非拼接字符串后使用innerHTML，以保证代码的可维护性和安全性。

2.效率意识：通过对比innerHTML（一次性重绘）和appendChild（多次重绘）的性能差异，引导学生思考在不同场景下选择最优方案，培养性能优化意识。

3.责任担当：在讲解remove()时，引申出前端开发者对用户体验的责任——及时清理无用DOM，可以减少内存占用，提升应用流畅度。【教学实施过程】步骤环节（用时）具体内容活动设计意图教师学生1情境导入

(5分钟)展示一个“待办事项（To-DoList）”应用的初始界面。提问：如何实现点击“添加”按钮后，在列表下方动态增加一个新的待办项？引出动态创建和插入节点的需求。演示静态页面，提出核心问题，激发学生思考。观察并思考：现有的DOM操作知识不足以解决此问题，需要学习新技能。以高频应用场景切入，明确学习目标，激发求知欲。2技能解锁1：创建与插入节点

(20分钟)1.创建节点：

-

document.createElement('li')

-

document.createTextNode('买牛奶')

2.组装节点：

-

li.appendChild(textNode)

3.插入节点：

-

ul.appendChild(li)

-

parent.insertBefore(newNode,existingNode)

演示：现场编码，实现“添加待办事项”功能。边讲边写代码，清晰展示从创建到插入的完整流程。特别解释insertBefore的用法。跟随老师敲代码，理解每个API的作用，并尝试修改任务内容。掌握动态构建DOM结构的基础方法。3技能解锁2：复制与替换节点

(15分钟)1.复制节点：

-

form.cloneNode(false)

(浅拷贝，仅复制表单本身)

-form.cloneNode(true)

(深拷贝，复制表单及其所有子元素)

2.替换节点：

-

oldElement.replaceWith(newElement)

演示：实现“一键复制整个联系表单”的功能。强调深浅拷贝的区别，并指出克隆后原节点的事件监听器会丢失，为后续事件委托做铺垫。动手练习，观察深浅拷贝在控制台输出的差异。学习高效复用现有DOM结构的技巧。4技能解锁3：删除节点

(10分钟)1.删除节点：

-

element.remove()

(现代、推荐)

-

parentNode.removeChild(child)

(传统方法)

2.安全提示：

-删除前最好确认，避免误操作。

演示：为待办事项列表的每一项添加“删除”按钮。对比新旧两种删除方法，推荐使用更简洁的remove()。为自己的待办事项列表添加删除功能。掌握清理DOM树的安全、有效方法。5综合任务挑战

(20分钟)任务：完善待办事项应用

1.用户可以在输入框输入内容，点击“添加”按钮，动态创建一个新的列表项。

2.每个列表项右侧有一个“删除”按钮，点击后该项从列表中移除。

3.（拓展）尝试为新添加的“删除”按钮绑定点击事件。巡视指导，重点关注学生如何将输入框的值作为文本节点内容，以及如何正确绑定删除事件。独立或结对编程，完成一个功能完整的待办事项小应用。在综合性任务中融会贯通所学知识，体验创造的乐趣。6课堂小结

(5分钟)总结DOM动态操作的四大核心方法：“创建-插入”、“复制-替换”、“删除”。强调这是实现现代Web应用动态性的基石。预告下一节课将把这些技能应用于“商品放大镜”项目。引导学生回顾知识脉络，强调其重要性。回顾并梳理本课所学的API和应用场景。巩固知识，建立完整的DOM操作认知体