《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期
教师姓名：某某老师年月日课题名称第7章DOM计划学时5学时内容分析DOM（DocumentObjectModel）文档
对象模型可以用于完成HTML和XML文档的操作。其中，在JavaScript中利用DOM操作HTML元素和CSS样式则是最常用的功
能之一，例如，改变盒子的大小、标签栏的切换、购物车等。本章将针对如何在JavaScript中进行DOM操作进行详细讲解。教学目标及
基本要求了解什么是DOM掌握元素与样式的操作掌握节点的操作教学重点获取元素、元素操作、节点操作教学难点获取节点、节点追加教学方式教
学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应
用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（认识DOM、获取元素、
内容操作、属性操作、样式操作）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，
引出本节课主题。在前面讲解了BOM对象的使用，BOM对浏览器进行操作，而DOM用来对文档进行操作，因此本节课将会讲解如何利用DOM
对象来对文档进行操作。（3）明确学习方向。了解什么是DOM，DOM的版本和发展历史。掌握HTML节点树的概念，能够说出节点之间的关
系。认识常用的DOM对象，能够区分元素与节点。掌握节点的类型。二、知识讲解什么是DOMDOM（DocumentObjectMo
del），即文档对象模型。一套规范文档内容的通用型标准。简要介绍DOM的发展历史。简要介绍DOM第1级、第2级、第3级的主要变化。
主要用途：操作HTML、XML文档。DOMHTML节点树DOM中为操作HTML文档提供了一些属性和方法，将HTML文档以节点树的
形式进行操作。演示如何将一段HTML代码转换成节点树。区分各个节点的关系，什么是根节点、子节点、父节点、兄弟节点。DOM对象的继承
关系分析document对象的继承关系。分析document.getElementById()返回的元素对象的继承关系。区分doc
ument对象、Node对象、Element对象的区别和关系。通过代码演示节点操作与元素操作的区别。列举常见节点类型，通过代码演示
如何比较两个对象节点类型是否相同。获取操作的元素在操作元素前，需要先获取元素。document提供了一些方法，用来根据id、nam
e和class属性以及标签名的方式获取元素。通过代码演示常用获取元素方法的使用。注意返回的对象可能有一个或多个。当返回的是对象集合
时，通过“[下标]”的方式来获取其中的对象。补充讲解HTML5新增的获取元素的方法。列举document中的一些用于获取元素的属性
。演示这些属性的使用方法。通过代码验证利用document的属性获取到的对象，与通过方法获取到的对象是否是同一个对象。除了使用do
cument对象可以获取对象，通过元素对象也可以获取对象。通过代码演示如何通过元素对象来获取对象，并注意与document对象获取
对象时的区别，元素对象这种方式通常只用于获取该元素内部的对象。演示如何通过元素对象的children属性来获取该元素的子元素。补充
讲解HTMLCollection与NodeList的区别。元素内容操作列举Element对象提供的操作元素内容的属性。列举docu
ment对象提供的操作元素内容的方法。通过代码演示这些属性和方法的具体使用。对比innerHTML、innerText和textC
ontent属性的区别。对比innerHTML属性和document.write()方法的区别。元素属性操作列举常用的元素属性操作
的属性和方法。通过代码演示元素属性的获取、修改、移除等操作。元素样式操作演示元素样式操作的基本语法。讲解如何将CSS样式名转换成s
tyle的属性名。列举常见的style属性名。通过代码演示如何对元素的样式进行添加。注意float样式在不同浏览器中的处理方案。演
示通过className属性对元素的class属性进行操作。演示通过classList属性对元素的class属性进行操作。通过具体
代码实现修改class、切换class、删除class等效果。三、【案例】改变盒子大小案例分析单击页面中的盒子，点一下变大，再点一
下变小。改变盒子大小和内部的文字通过更改innerHTML属性，来改变盒子内的文字。通过对宽、高样式操作，来改变盒子的大小。实现大
小切换根据单击次数，奇数时变大，偶数时变小。四、【案例】标签栏切换效果开发背景标签栏在网页中使用非常普遍。其优势在于可以在有限的空
间内展示多块的内容。案例分析用户可以通过标签在多个内容块之间进行切换。代码实现编写HTML页面，准备4个标签，和对应的4个>内容。利用JavaScript获取元素，并添加鼠标滑过事件。当鼠标滑过某个元素时，对所有标签进行遍历，通过样式操作实现标签的选中
效果，并控制对应内容的显示或隐藏。测试程序。五、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系
统下发课后作业。第二学时（获取节点、节点追加、节点删除）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。在前面学习了DOM的元素操作方式，除了元素操作，在DOM中还有一种很重要的操作方式，就是节点
操作。本节将对节点操作进行讲解。（3）明确学习方向。掌握节点方式访问节点的常用属性的使用。掌握节点追加的相关方法的使用。掌握节点删
除操作。二、知识讲解获取节点列举获取节点的相关属性。注意节点操作与元素操作的区别，对比childNodes和children，节点
操作会包含文本节点等其他类型的节点。对比节点操作和元素操作，获取到的是否为同一个对象。通过案例演示节点的查看获取。节点追加docu
ment对象提供了一些创建节点的方法，可以创建元素、文本、属性等类型的节点。通过节点追加相关方法，可以在指定节点的子节点末尾添加一
个节点，或者将某个节点插入到指定节点之前。对于属性节点也可以对其进行获取或设置操作。通过代码演示节点创建、节点追加、属性节点操作方
法的使用。节点删除列举常用的节点删除方法。通过代码演示节点删除，以及属性节点删除三、知识巩固（1）回顾上课前的学习目标，对本节课
知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（案例：列表的增删和移动）一、回顾上节课内容（1）对上节课布置的作业以
及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。运用节点操作实现列表的交互功能。运用面向对
象编程更好地组织代码。二、知识讲解案例分析演示案例实现效果，分析具体功能。根据数据自动生成列表。可以对列表进行上移、下移、添加、删
除操作。组件化设计：为HTML中的class添加前缀。列表是网站后台的常用组件，一个后台页面可能会非常复杂，包含许多功能模块，为同
一个模块的代码添加相同的class前缀，可以使代码组件化，更易维护。准备工作编写HTML代码，设计列表的结构与样式。编写Smart
List函数，用来封装列表自动生成的代码。该函数的第1个参数表示class前缀，第2个参数表示将页面打开后，自动添加到列表的数据。
调用SmartList函数，并将默认显示的数据以数组的形式传进去。为了更方便的获取元素，将获取元素的代码封装成Find构造函数。演
示Find构造函数的使用，创建find对象然后自动获取元素。自动生成列表演示自动生成列表的实现原理，先将页面中的现有的1个列表项当
成模板，通过JavaScript读取这个模板，然后基于模板克隆一个新的列表项，更改value属性后，添加到列表末尾。设计一个Lis
t构造函数，用来实现列表的添加。在SmartList函数中遍历传入的数组，将数组中每一项的值赋值给新添加列表项的value属性。通
过浏览器访问测试，观察页面打开后，列表项是否已经生成。实现列表的移动和删除列表移动的实现原理，查找当前元素的前一个节点或后一个节点
，然后将当前元素移动到指定节点的前后。为查找元素的对象增加prev()、next()方法，用于查找前后的元素节点。注意判断节点的类
型，如果找不到则返回null。为上移、下移按钮添加事件，实现列表项的移动。为删除按钮添加事件，实现列表项的删除。实现列表的添加在页
面中增加“添加项目”的按钮，单击后显示添加到新列表的输入框。分析添加项目实现原理。编写代码完成列表添加功能。通过浏览器访问测试，观
察新列表项是否能添加成功。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第
四学时（动手实践：购物车）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节
课主题。（3）明确学习方向。掌握DOM操作的综合运用。掌握购物车功能的开发。二、知识讲解案例分析购物车是电子商务网站的常见功能。利
用购物车，可以保存用户选购的多件商品。在购物车页面中，可以进行商品数量的添加与减少，选中与取消选中（选中表示本次购买，未选中表示以
后再购买），从购物车中删除等。显示每件商品的小计价格。显示购物车已选择商品数量和总计价格。准备工作编写HTML代码，设计购物车的结
构和显示样式。封装ShopCart()函数，第1个参数表示class前缀，第2个参数表示页面打开后显示在购物车中的商品数据。封装F
ind()构造函数，用来查找元素。添加购物车商品编写Cart()构造函数，用来创建购物车。将需要操作的对象保存到成员属性中，方便在
成员方法中使用。在Cart.prototype对象中编写add()方法，用来向购物车中添加一件商品。读取网页中的模板元素，新添加的
商品基于模板克隆。编写Item()构造函数，用来创建购物车中的商品对象。通过成员属性data保存商品数据（数量、价格等）。在It
em.prototype对象中编写updateSubtotal()方法，用来获取小计。修改商品修改商品包括商品数量修改以及删除商品
操作。为元素添加事件，通过调用对象的属性和方法完成具体操作。为商品数量按钮添加事件，每当商品数量发生变化时，更新小计和总计。为商品
删除链接添加事件，每当商品删除时，更新总计。实现总计、全选与删除在Cart.prototype对象中编写updateTotal()方法，用于更新购买数量和总计。实现全选功能、删除商品功能。拓展：以后可以学习artTemplate模板引擎来更方便的处理页面代码。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第五学时（上机练习）教师发放本章相关资料和素材，学生进行上机练习，以此检查学生对相关知识点的掌握情况。上机练习完成后将报告通过平台提交给老师。教学后记第3章面向对象（上）2 |
|
