第9单元 DOM对象模型简介与操作（教案1：2 学时）

教学设计一、基本信息课程名称Web前端开发技术（AIGC版）课题名称DOM对象模型简介与操作授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络），依托超星教学平台（已建设对应网络课程）授课学时40分钟*2学时教材分析本节选自教材第九单元核心内容，DOM是JS操作网页元素的核心技术，承接HTML/CSS与JS的衔接作用。内容涵盖DOM模型概念、节点树结构及获取、修改、创建、删除元素等操作，教材案例贴合实操需求，是实现网页动态效果的基础，同时可结合AIGC辅助生成代码，降低抽象知识学习难度，契合职校理实一体化教学需求。学情分析1.前置基础：已掌握HTML基础标签、CSS样式布局及JavaScript核心语法，能编写简单JS代码，熟悉VSCode操作与浏览器调试工具，具备AIGC工具基础使用能力。2.学情特点：动手能力强、具象思维突出，对实操项目兴趣浓厚；抽象逻辑较弱，对“对象模型”“节点树”等概念理解困难，需依托可视化演示与分步实操突破。3.衔接需求：通过本课程掌握DOM操作核心技能，为后续BOM操作、事件处理、数据交互等内容铺垫，构建完整的JS前端开发知识体系。教学目标【知识目标】：1.理解DOM对象模型概念、节点树结构及核心节点类型。2.掌握DOM元素获取、内容修改、属性操作的常用方法，能结合教材案例编写代码。【能力目标】：1.能独立运用DOM方法获取指定元素，完成内容、样式及属性的修改操作。2.能借助AIGC工具优化DOM代码，排查实操中的语法与逻辑错误。【素质目标】：1.培养严谨的编码习惯与问题排查能力，强化具象思维向抽象思维转化的能力。2.树立“AI协同开发”理念，提升高效解决实际开发问题的能力。教学重点1.DOM元素获取的常用方法（getElementById、querySelector等）及适用场景。2.DOM元素内容、属性及样式的修改操作，能结合教材案例实现动态效果。教学难点1.DOM节点树概念的理解，及不同元素获取方法的区别与选型。2.innerHTML与textContent的使用差异，及样式操作的优先级问题。教学准备1.硬件：机房计算机、投影仪、网络环境。2.软件：VSCode、Chrome浏览器、超星教学平台、AIGC工具（通义灵码）。3.素材：教材DOM案例代码、节点树可视化图、实操任务单、AIGC提示词模板、微课视频。教学方法1.主导方法：BOPPPS教学法。2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、小组协作法、可视化教学法。板书设计DOM对象模型与操作1.概念：文档→节点树（元素/文本/属性节点）2.获取：getElementById、querySelector3.操作：内容（innerHTML）、属性、样式二、教学设计教学环节教学内容师生活动设计意图/时间一、导入（Bridge-in）1.情景演示：展示2个网页效果（静态网页与动态网页），动态网页演示“点击按钮修改文本内容”“鼠标悬浮改变样式”效果，提问学生：“这些动态效果如何通过JS实现？”2.引出主题：告知学生实现这些效果的核心技术是DOM，说明DOM的作用——让JS能“操控”网页元素，关联美丽乡村网动态更新需求，激发学习兴趣。3.亮点预告：介绍本节课可借助AIGC工具生成DOM代码，快速验证效果，帮助理解抽象概念。教师：1.演示静态与动态网页对比效果，引导学生观察差异，提出问题引发思考。2.简要说明DOM的核心价值，结合美丽乡村网场景，让学生感知知识的实用性。3.展示AIGC生成简单DOM代码的过程，降低学生对新知识的畏惧感。学生：1.观察演示效果，思考动态效果的实现逻辑，主动回应教师提问。2.明确本节课学习目标，对AIGC辅助开发产生兴趣，做好学习准备。设计意图：以动态效果对比导入，贴合职校生具象思维特点，激发学习兴趣；提前渗透AIGC辅助亮点，为后续实操铺垫。时间：5分钟（第一学时）二、目标（Objective）1.知识目标：掌握DOM概念、节点树结构，学会3种以上元素获取方法及内容、属性修改操作。2.能力目标：能独立完成教材范例9-1的简化版实操，借助AIGC优化代码。3.重难点告知：明确重点为元素获取与修改，难点为节点树理解与方法选型，说明将通过可视化演示与分步实操突破。教师：1.逐条明确教学目标，结合实操任务说明目标的可达成性。2.用通俗语言解读重难点，告知学生突破方法，让学生做到心中有数。学生：1.记录教学目标与重难点，明确学习重点方向。2.结合自身基础，预判学习难点，做好针对性听讲准备。设计意图：明确目标与重难点，帮助学生聚焦学习核心，提升课堂效率；提前告知突破方法，增强学生学习信心。时间：3分钟（第一学时）三、前测（Pre-assessment）1.基础提问（口头）：HTML中id属性的作用？JS中如何定义变量与函数？2.简单实操（5分钟）：让学生在VSCode中创建HTML文件，编写一个含id为“title”的h2标签（内容为“DOM学习”），并引入JS脚本标签。3.结果反馈：快速巡视学生实操情况，纠正文件结构错误、标签拼写错误等共性问题。教师：1.口头提问快速检验前置知识，对回答不完整的地方补充讲解。2.巡视实操过程，对文件路径、标签嵌套等共性错误集中演示修正。学生：1.积极回应口头提问，巩固前置知识。2.按要求完成简单实操，自主排查语法错误，对疑难问题举手求助。设计意图：检验前置知识掌握情况，为后续教学调整节奏；通过简单实操铺垫DOM操作的基础环境，降低新课实操难度。时间：7分钟（第一学时）四、参与式学习（ParticipatoryLearning）-新知讲授与实操11.DOM概念与节点树（可视化演示）：（1）展示节点树可视化图，讲解文档、元素、文本、属性节点的关系，类比“家谱树”帮助理解。（2）说明浏览器加载网页时自动生成DOM树，JS通过DOM树操控元素。2.DOM元素获取方法（案例演示+分步实操）：（1）讲解getElementById方法：演示通过id获取h2标签，代码为“vartitle=document.getElementById('title');”，强调id的唯一性。（2）讲解querySelector方法：演示“document.querySelector('#title')”，说明与getElementById的区别（支持更多选择器）。（3）学生实操：在之前的文件中，用两种方法获取元素，通过console.log打印验证。3.AIGC辅助：给出提示词“用JS两种方法获取id为title的元素，打印到控制台”，演示生成代码并对比讲解。教师：1.用可视化图拆解抽象概念，语言通俗化，避免专业术语堆砌。2.分步演示代码编写，结合浏览器控制台展示效果，及时纠正学生的语法错误。3.指导学生使用AIGC生成代码，讲解代码逻辑，培养AI协同思维。学生：1.结合可视化图理解节点树概念，记录两种元素获取方法的语法。2.按步骤完成实操，通过控制台验证结果，对获取失败的情况自主排查（如id拼写错误）。3.尝试使用AIGC生成代码，对比自身代码，优化写法。设计意图：通过可视化演示突破节点树理解难点，分步实操强化元素获取方法；融入AIGC辅助，契合课程特色，提升学习效率。时间：15分钟（第一学时）五、参与式学习（ParticipatoryLearning）-新知讲授与实操21.DOM元素内容修改：（1）讲解innerHTML与textContent的区别：演示修改h2标签内容，对比两种方法的效果（innerHTML支持HTML标签，textContent仅显示文本）。（2）学生实操：用两种方法将h2内容修改为“DOM实操学习”，添加红色字体样式（innerHTML结合span标签）。2.DOM元素属性修改：（1）讲解setAttribute方法：演示为h2标签添加“title”属性，值为“DOM标题”。（2）学生实操：为h2标签添加class属性，关联简单CSS样式（如字体大小24px）。教师：1.对比演示两种内容修改方法，用实例说明适用场景，突破难点。2.巡视学生实操，重点指导样式关联与属性设置错误，集中讲解共性问题。学生：1.记录两种方法的区别与用法，按要求完成实操任务。2.自主测试效果，对样式不生效、属性设置失败等问题主动求助或小组讨论。设计意图：通过对比演示与实操，让学生掌握内容、属性修改方法，明确方法选型逻辑；小组协作与教师指导结合，提升实操成功率。时间：10分钟（第一学时）六、后测（Post-assessment）-第一学时小结1.小组任务（5分钟）：2人一组，结合本节课内容，完成“获取元素+修改内容+设置属性”完整实操，代码添加注释。2.成果抽检：选取2组学生作品，在投影仪展示，点评亮点与不足，纠正方法选型错误。3.小结回顾：梳理本节课核心知识点，强调元素获取方法的选型技巧与innerHTML的使用注意事项。教师：1.布置小组任务，明确时间与要求，巡视指导小组协作。2.点评抽检作品，集中讲解共性错误，强化知识点记忆。3.简洁小结，衔接下一时学内容（DOM元素创建、删除与遍历）。学生：1.小组协作完成任务，相互检查代码，排查错误。2.对照优秀作品，修正自身不足，记录小结要点。设计意图：通过小组任务检验学习效果，强化知识应用能力；点评与小结结合，帮助学生梳理知识体系，为下一时学铺垫。时间：5分钟（第一学时）一、导入（Bridge-in）1.回顾衔接：提问上一时学内容（元素获取、内容修改方法），快速抽查2名学生回答。2.情景延伸：展示教材范例9-1效果，提问“如何动态添加新段落？如何删除现有元素？”，引出本节课内容（DOM元素创建、删除与遍历）。3.任务预告：本节课将完成教材范例9-1的完整实操，掌握DOM操作全流程。教师：1.快速回顾旧知，强化记忆，为新知衔接铺垫。2.展示案例效果，提出问题引发思考，激发学生探索欲。学生：1.积极回应回顾提问，巩固旧知。2.观察案例效果，思考问题答案，明确本节课学习方向。设计意图：温故知新，实现新旧知识自然衔接；以案例提问导入，贴合职校生实操导向，激发学习兴趣。时间：4分钟（第二学时）二、目标（Objective）1.知识目标：掌握DOM元素创建、添加、删除及遍历的常用方法，理解教材范例9-1、9-2核心逻辑。2.能力目标：能独立完成教材范例9-1实操，能简单遍历DOM节点。3.重难点告知：重点为元素创建与删除，难点为节点遍历与parentNode属性使用，将通过分步实操与案例拆解突破。教师：1.明确本节课教学目标，结合教材案例说明实操任务。2.解读重难点，告知突破方法，引导学生针对性学习。学生：1.记录目标与重难点，结合旧知预判学习难度。2.结合教材案例，做好听讲与实操准备。设计意图：明确学习核心，让学生聚焦重点；提前告知重难点及突破方法，提升课堂学习针对性。时间：3分钟（第二学时）三、前测（Pre-assessment）1.实操回顾：让学生打开上一时学的实操文件，快速修改代码，验证元素获取与内容修改功能。2.问题提问：JS中函数的定义方式？如何为按钮绑定点击事件？（为案例实操铺垫）3.反馈纠正：针对学生回顾实操中的错误，快速讲解修正，确保旧知掌握扎实。教师：1.巡视学生回顾实操情况，对遗忘知识点的学生单独指导。2.提问绑定事件知识，补充讲解简单的onclick绑定方式，为案例实操铺垫。学生：1.快速回顾旧知实操，排查代码错误。2.回应提问，巩固事件绑定基础，为新知实操做好准备。设计意图：巩固旧知，确保学生具备学习新知的基础；铺垫事件绑定知识，降低教材案例实操难度。时间：3分钟（第二学时）四、参与式学习（ParticipatoryLearning）-新知讲授与实操31.元素创建与添加（教材范例9-1拆解）：（1）讲解createElement、textContent、appendChild方法：演示创建p标签，设置内容并添加到容器中。（2）学生实操：创建div容器（id为“container”），编写“添加元素”按钮，绑定点击事件，实现点击添加新段落功能。2.元素删除（教材范例9-1拆解）：（1）讲解parentNode与removeChild方法：演示获取要删除的元素，通过父节点删除。（2）学生实操：添加“删除元素”按钮，绑定事件，实现删除最后一个p标签功能。3.AIGC辅助：给出提示词“编写JS代码，实现点击按钮添加p标签、点击删除按钮删除最后一个p标签，适配id为container的容器”，生成代码并优化。教师：1.分步拆解教材案例，演示每个方法的使用，结合浏览器调试工具展示效果。2.重点讲解parentNode的使用，用通俗语言解释“找到父元素才能删除子元素”。3.指导学生使用AIGC生成代码，对比教材案例优化逻辑，讲解代码注释写法。学生：1.跟随演示拆解案例，记录方法语法与使用步骤。2.按步骤完成实操，测试按钮功能，自主排查“删除失败”等问题。3.借助AIGC优化代码，添加注释，规范编码格式。设计意图：拆解教材案例，降低实操难度，契合职校生分步学习习惯；强化AIGC辅助，提升代码质量与编码效率；突破删除元素的难点。时间：18分钟（第二学时）五、参与式学习（ParticipatoryLearning）-新知讲授与实操41.DOM节点遍历（教材范例9-2简化）：（1）讲解childNodes、firstChild、lastChild属性：结合节点树图，演示遍历容器下的子节点。（2）学生实操：编写“遍历节点”按钮，绑定事件，遍历container容器下的子节点，打印节点类型与内容。2.综合实操：整合本节课内容，完善教材范例9-1实操，实现“添加、修改、删除、遍历”全功能。教师：1.用可视化图辅助讲解遍历属性，说明节点类型的区分（元素节点、文本节点）。2.巡视综合实操情况，对遍历逻辑错误、功能冲突等问题重点指导。3.收集共性问题，集中演示修正方法，强化综合应用能力。学生：1.理解遍历属性的用法，完成简化版遍历实操，验证打印结果。2.整合全功能代码，测试各按钮功能，小组间相互检查，排查逻辑错误。设计意图：简化教材遍历案例，降低学习难度；综合实操整合知识点，提升学生知识应用与综合开发能力。时间：8分钟（第二学时）六、后测（Post-as