单元 10 DOM介绍 开发教程

PAGE3PAGE单元10JavaScriptDOM介绍课程名称HTML5+CSS3+JavaScriptWeb前端基础教程（慕课版）项目名称DOM操作与事件处理实战任务名称DOM元素操作、事件绑定与动态交互实现课时4项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．了解DOM的概念、节点类型与DOM树结构；2．掌握DOM元素的查找方法（getElementById、querySelector等）；3．理解DOM元素的属性修改、内容修改与样式修改；4．掌握DOM元素的创建、添加与删除方法；5．熟悉DOM事件的绑定方式（onclick、addEventListener）；6．了解事件冒泡与事件委托的基础概念。能力目标1．能够通过多种方式查找并获取DOM元素；2．能够动态修改元素的属性（如src、href）、内容（innerHTML、textContent）与样式；3．能够动态创建元素并添加到页面中，或删除指定元素；4．能够绑定单击、鼠标悬浮等事件，实现交互效果；5．能够制作ToDoList列表，实现新增、删除任务功能；6．能够为淘宝首页添加点击事件，实现导航栏下拉菜单效果。素质目标1．培养"数据驱动视图"的开发思维；2．养成DOM操作的规范习惯（如先判断元素存在再操作）；3．提升事件处理逻辑的条理性；4．增强代码的可维护性（如事件委托的合理使用）；教学内容1.任务描述：掌握DOM核心操作与事件处理，实现ToDoList、导航栏下拉菜单等交互功能；2.任务展示与实现：（1）教师讲解DOM概念与DOM树结构，演示元素查找方法（getElementById、querySelectorAll）；（2）学生实操：查找页面中的导航栏元素，修改其背景颜色；（3）教师讲解DOM元素属性与内容修改（setAttribute、innerHTML）；（4）学生实操：动态修改图片的src属性，实现图片切换效果；（5）教师讲解元素创建（createElement）、添加（appendChild）与删除（removeChild）方法；（6）学生实操：点击按钮动态添加列表项，点击删除按钮移除对应项；（7）教师讲解事件绑定方式，对比onclick与addEventListener的差异；（8）学生实操：实现按钮点击时切换元素显示/隐藏状态；（9）教师讲解事件冒泡与事件委托，演示列表项的批量事件处理；（10）分组开发：制作ToDoList，实现任务新增、删除、勾选完成功能；3.核心知识点讲解：DOM元素查找、属性修改、元素增删、事件绑定、事件委托；4.任务小结：DOM操作性能优化技巧（如减少重排、事件委托）；教学重点（1）DOM元素的多种查找方法（getElementById、querySelector、querySelectorAll）；（2）DOM元素属性（setAttribute/getAttribute）与内容（innerHTML/textContent）修改；（3）元素的创建（createElement）、添加（appendChild）与删除（removeChild）；（4）addEventListener事件绑定方式与事件类型（click、mouseover等）；（5）ToDoList的新增、删除功能实现；教学难点（1）querySelector与getElementsBy系列方法的区别（静态vs动态集合）；（2）innerHTML与textContent的安全差异（避免XSS风险）；（3）事件冒泡的原理与阻止方法（stopPropagation）；（4）事件委托的实现逻辑（利用冒泡委托父元素处理子元素事件）；（5）动态创建元素的事件绑定问题；教学准备1.装有VSCode与Chrome浏览器的电脑；2.教学课件PPT（含DOM树示意图、元素操作流程图）；3.DOM元素查找、修改案例代码；4.ToDoList需求文档与参考效果；5.事件冒泡、事件委托案例代码；6.淘宝导航栏下拉菜单效果参考图；作业设计1.实现图片轮播切换功能：页面中有3张图片，点击"上一张"、"下一张"按钮切换显示对应的图片；2.制作一个计数器：页面显示数字，点击"加1"按钮数字+1，点击"减1"按钮数字-1，点击"重置"按钮数字归零；3.实现动态列表功能：输入框中输入内容，点击"添加"按钮将内容添加到列表中，点击列表项后的"删除"按钮移除该列表项；4.制作复选框全选/取消全选功能：点击"全选"复选框，所有子复选框选中；取消"全选"，所有子复选框取消选中；5.为单元9的用户列表添加点击事件，点击用户项时显示该用户的详细信息（如弹出提示框）；教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）1.检查学生电脑的Chrome浏览器开发者工具（Elements、Console面板）是否正常使用，确保本地案例代码（DOM元素查找、修改、事件绑定示例）可运行；2.准备教学课件PPT（含DOM树示意图、元素操作流程图）、实训素材（ToDoList需求文档、淘宝登录模块参考图、动态列表案例代码）；3.引导学生打开上一单元的“用户列表”HTML页面，为本次DOM操作做铺垫，发放“ToDoList列表”综合实训任务单。【课前回顾】1.回顾JavaScript基础语法（变量、函数、流程语句），强调“DOM是JS操作网页元素的接口”，结合淘宝登录按钮点击事件、商品列表动态添加等案例，说明DOM操作是实现网页交互的核心，引出本单元核心——DOM元素操作与事件处理；2.明确学习目标：掌握DOM元素的查找、修改、增删方法，能绑定事件实现交互效果（如ToDoList、图片切换），学会使用事件委托解决动态元素事件绑定问题；3.告知实训任务：课堂将完成“ToDoList列表”综合实训，课后需完成“计数器”“复选框全选”作业，考评重点为DOM操作逻辑、事件绑定正确性与代码规范性。一、DOM简介与元素查找1.核心概念：通过示意图讲解DOM树结构，说明文档（document）、元素（element）、节点（node）的关系（文档包含元素，元素包含节点），让学生理解DOM是“网页元素的映射”；2.查找方法：演示4种常用元素查找方法——①getElementById（通过ID查找，返回单个元素）；②getElementsByClassName（通过类名查找，返回HTMLCollection动态集合）；③querySelector（通过选择器查找单个元素，如document.querySelector('.box')）；④querySelectorAll（通过选择器查找多个元素，返回NodeList静态集合），对比getElementsBy系列与querySelector系列的差异（静态集合：查询后不随DOM变化；动态集合：查询后随DOM变化）；3.实战演示：以“用户列表”页面为例，分别用不同方法查找导航栏元素、按钮元素、列表项，通过console.log()输出元素，让学生直观看到查找结果。二、DOM元素修改1.内容修改：讲解innerHTML（含HTML标签的内容修改，如element.innerHTML='<strong>文本</strong>'）与textContent（纯文本内容修改，如element.textContent='文本'）的区别，演示修改页面文本内容的效果，提醒innerHTML存在XSS风险（避免直接插入用户输入的内容）；2.属性修改：讲解setAttribute（设置属性，如img.setAttribute('src','图片路径')）、getAttribute（获取属性，如img.getAttribute('src')）的用法，通过“图片切换”案例演示修改img标签的src属性，实现点击按钮切换图片；3.样式修改：讲解两种样式修改方式——①style属性（直接修改行内样式，如element.style.color='red'）；②classList（操作类名，如element.classList.add('active')/remove('active')），对比两种方式的优缺点（style属性直接但不利于样式复用，classList利于样式复用，推荐使用）。三、DOM元素增删1.元素创建：讲解createElement（创建元素，如document.createElement('li')）、appendChild（添加元素到父元素末尾，如parent.appendChild(child)）的用法，演示“点击按钮动态添加列表项”（创建li元素→设置内容→添加到ul中）；2.元素删除：讲解removeChild（删除元素，如parent.removeChild(child)）的用法，演示“点击删除按钮移除对应列表项”，强调删除元素前需先获取父元素，提醒不能直接删除元素（如child.remove()在部分浏览器兼容，建议用removeChild）；3.实战案例：实现“动态列表”功能（输入框输入内容，点击按钮添加到列表，点击列表项删除该条目），整合元素创建、添加、删除方法。四、DOM事件处理1.事件绑定：对比两种事件绑定方式——①onclick直接绑定（如button.onclick=function(){}）；②addEventListener事件监听器（如button.addEventListener('click',function(){})），强调addEventListener的优势（支持绑定多个事件、可移除事件监听）；2.常用事件：演示click（单击）、mouseover（鼠标悬浮）、mouseout（鼠标离开）、input（输入事件）的用法，结合“按钮点击修改文本颜色”“鼠标悬浮显示提示”案例演示效果；3.事件冒泡与委托：讲解事件冒泡的原理（事件从子元素向上传播到父元素），通过“列表项批量事件处理”案例演示事件委托（利用冒泡委托父元素处理子元素事件，如给ul绑定事件，处理li的点击），说明事件委托的优势（减少事件绑定、支持动态元素），演示如何通过stopPropagation()阻止事件冒泡。1.综合实训：学生独立完成“ToDoList列表”开发，实现以下功能；（1）输入框输入内容，点击“添加”按钮将内容添加到列表（创建li元素，设置内容，添加到ul中）；（2）点击列表项前的复选框，标记任务为完成（修改文字样式为删除线，通过classList添加active类）；（3）点击列表项后的“删除”按钮，移除该任务（通过父元素删除li元素）；2.分步指导：（1）第一步：搭建HTML结构（输入框、按钮、列表容器ul），编写基础CSS样式；（2）第二步：编写JS代码，实现添加任务功能（获取输入框值→创建li→添加到ul）；（3）第三步：实现任务完成功能（给复选框绑定click事件，修改父元素样式）；（4）第四步：实现任务删除功能（给删除按钮绑定click事件，删除对应li）；3.问题答疑：重点解决“动态创建元素的事件绑定”（推荐事件委托）、“复选框状态判断”（checked属性）、“输入框内容清空”（value=''）等问题，演示事件委托在ToDoList中的应用（给ul绑定事件，处理li内的删除按钮点击）。1.知识梳理：用表格总结DOM元素操作的核心方法（查找、修改、增删）与事件绑定方式，强调“查找元素→修改/增删→绑定事件”的流程，总结事件委托的实现逻辑；2.重点强调：inner