HTML5+CSS3+JavaScript Web 前端基础教程电子教案 单元 10 JavaScript DOM介绍.docxVIP

PAGE3

PAGE

单元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．培养数据驱动视图的开发思