JavaScript+Vue前端基础教程电子教案 第5单元 JavaScript DOM 介绍

PAGE1PAGE单元5JavaScriptDOM介绍课程名称JavaScript+Vue前端基础教程项目名称JavaScriptDOM介绍任务名称JavaScriptDOM介绍课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．掌握DOM的概念及HTMLDOM树的结构组成。2．掌握DOM元素的查找、创建、修改、删除方法。3．掌握常见DOM事件（click、mouseover、change等）的绑定与处理。4．了解DOM事件监听器的添加、移除及事件冒泡与捕获机制。能力目标1．能够熟练使用document对象查找并操作DOM元素（修改内容、属性、样式）。2．能够为DOM元素绑定各类事件并编写事件处理函数。3．能够使用事件监听器实现复杂的交互逻辑，理解事件传播机制。4．能够结合DOM操作实现网页的动态交互效果（如待办事项列表、搜索功能）。素质目标1．发展事件驱动编程思维，增强对用户行为与程序响应之间因果关系的理解。2．树立以用户为中心的设计理念，体会良好交互体验对技术实现的要求。3．培养耐心排查、逻辑推理和持续优化的探究精神。教学内容1.任务描述介绍DOM在前端开发中的核心作用，明确DOM元素操作与事件处理的学习目标。2.任务展示与实现（1）DOM元素的查找（getElementById、getElementsByClassName等）与操作（修改内容、属性、样式）演示。（2）DOM元素的创建、插入与删除实践。（3）常见DOM事件的绑定（onclick、onmouseover等）与事件处理函数编写。（4）事件监听器的添加、移除及事件冒泡与捕获的验证。（5）学生动手操作：完成待办事项列表、搜索结果页面等交互功能实现。3.教师讲解本任务涉及的知识点（1）DOM的概念、HTMLDOM树的结构及节点类型。（2）DOM元素的查找、创建、修改、删除的核心方法。（3）常见DOM事件的类型、触发条件及事件对象的使用。（4）事件监听器的语法、参数及事件传播机制（冒泡与捕获）。4.任务小结教学重点（1）DOM元素的查找与操作方法（修改内容、属性、样式）。（2）常见DOM事件的绑定与事件处理函数编写。（3）事件监听器的添加与移除。（4）DOM操作与事件处理结合实现动态交互效果。教学难点（1）理解事件冒泡与捕获的传播机制及应用场景。（2）掌握事件对象的核心属性与方法（如target、preventDefault）。（3）灵活运用DOM操作实现复杂交互逻辑（如批量删除、搜索筛选）。（4）处理DOM操作中的异步问题与性能优化。教学准备1.装有VSCode的电脑及相关开发环境。2.教学课件PPT（含HTMLDOM树结构示意图、事件传播机制图解）。3.教材：《JavaScript+Vue前端基础教程》。4.示例代码（DOM元素操作、事件绑定、事件监听器案例）。5.商业案例素材（学生信息管理系统查看/删除功能需求）。作业设计1.制作待办事项列表页面，实现新增、删除、标记完成等功能（结合DOM操作与事件处理）。2.开发搜索结果页面，实现搜索关键词与结果的匹配高亮功能。3.为学生信息管理系统实现查看和删除学生信息功能，通过DOM操作控制弹窗显示与数据删除。4.编写代码验证事件冒泡与捕获机制，实现事件委托功能。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）1.提前检查实训设备，确保所有电脑已安装Chrome浏览器和VSCode开发环境，备好教学课件PPT（含HTMLDOM树结构示意图、事件传播机制图解）、教材、示例代码（DOM元素操作、事件绑定、事件监听器案例）及商业案例素材（学生信息管理系统查看/删除功能需求）。2.引导学生有序就座，打开预设的实训项目文件夹（含HTML模板文件、JS素材），调试浏览器与编辑器环境，提醒学生准备笔记本，记录DOM操作核心API与事件处理逻辑，为课程开展做好准备。【课前说明】1.以互动演示导入：打开预设的静态网页，通过开发者工具修改DOM元素内容与样式，实时展示页面变化，引出DOM的核心作用——“操作网页元素的桥梁”。2.介绍本单元核心学习内容：DOM概念与HTMLDOM树结构，DOM元素的查找、创建、修改、删除，DOM事件绑定与处理，事件监听器与事件传播机制，让学生建立整体认知。【目的】明确本单元知识目标（掌握DOM元素操作、事件处理、监听器使用等）、能力目标（实现动态交互效果、处理用户事件等）、素质目标（事件驱动思维、用户中心设计等），说明教学重点（元素操作、事件绑定、交互实现）、难点（事件冒泡与捕获、事件委托、异步问题处理）及考评方式，让学生清晰学习方向。一、DOM核心认知1.讲解DOM概念：文档对象模型（DocumentObjectModel），将HTML文档解析为树状结构（DOM树），每个节点对应元素、属性或文本，结合HTML代码示例绘制简化DOM树，让学生理解节点层级关系。2.核心节点类型：元素节点（HTML标签）、文本节点（标签内文字）、属性节点（标签属性），说明document对象是DOM操作的入口。二、DOM元素操作1.元素查找：详解核心方法（getElementById通过ID查找、getElementsByClassName通过类名查找、getElementsByTagName通过标签名查找），对比方法返回值（单个元素/元素集合），结合示例演示查找逻辑。2.元素修改：（1）内容修改：innerHTML（含HTML标签）、innerText（纯文本）的区别与使用场景，示例：document.getElementById("demo").innerHTML="<h1>标题</h1>"。（2）属性修改：setAttribute设置属性、getAttribute获取属性、removeAttribute删除属性，结合图片src属性修改案例演示。（3）样式修改：通过style属性修改行内样式，示例：element.style.color="red"。3.元素创建与删除：（1）创建：createElement创建元素节点、createTextNode创建文本节点，appendChild添加节点，示例：varp=document.createElement("p");p.appendChild(document.createTextNode("新段落"))。（2）删除：removeChild删除子节点，强调需通过父元素删除目标节点。三、DOM事件处理1.常见事件类型：click（单击）、mouseover（鼠标移入）、mouseout（鼠标移出）、change（内容改变），结合按钮单击、输入框校验案例说明。2.事件绑定方式：（1）HTML属性绑定（onclick等）：简单直接，适合简单交互，示例：<buttononclick="alert('点击')">按钮</button>。（2）JS动态绑定：通过元素属性赋值，示例：document.getElementById("btn").onclick=function(){alert('点击')}。3.事件监听器：addEventListener添加监听器（支持多个事件处理函数）、removeEventListener移除监听器，讲解事件冒泡（从目标元素向上传播）与捕获（从根元素向下传播）机制，结合嵌套元素事件案例演示。4.事件对象：讲解event对象的核心属性（target目标元素、preventDefault阻止默认行为），结合表单提交阻止案例演示。1.教师演示：（1）DOM元素操作演示：-查找并修改：查找ID为“title”的元素，修改其文本内容与颜色。-创建并添加：创建包含“新内容”的div元素，添加到页面body中。-删除元素：查找class为“old”的元素，通过父元素删除。（2）事件处理演示：-绑定click事件：为按钮绑定单击事件，实现弹窗提示。-事件监听器：为输入框添加change事件监听器，实时显示输入内容。-事件冒泡验证：创建嵌套div元素，均绑定click事件，演示冒泡现象，使用stopPropagation阻止冒泡。2.学生动手操作：（1）DOM操作练习：创建HTML页面，包含标题、段落、图片元素，通过JS实现：修改标题颜色、替换图片src属性、添加新的列表项、删除指定段落。（2）事件处理练习：-实现按钮单击事件：单击按钮隐藏页面中的某个元素。-实现鼠标交互：鼠标移入元素时改变背景色，移出时恢复。-实现表单校验：为输入框添加change事件，验证输入内容是否为数字，若不是则提示错误。教师巡视指导，重点解决元素查找失败（路径错误）、事件绑定无效、冒泡机制理解混淆等问题。1.知识梳理：快速回顾DOM树结构、元素操作API、事件绑定方式、事件传播机制等核心知识点，强调innerHTML与innerText的区别、事件监听器的添加与移除、preventDefault的使用场景等易错点。2.学生表现评价：对能够独立完成DOM操作与事件处