《web前端设计》教案10.pdfVIP

教案

授课时间2016年5月9日第10周第5-8节

课程内容项目三BOM和DOM应用（Document、form对象）

授课班级2016数字媒体应用技术1、2合班授课地点S301

1、掌握Document对象的常用属性及方法

知识目标

2、掌握getElement(s)ByXX的用法

教学目标能力目标1、会使用getElement(s)ByXX获取网页元素，实现复选框全选等功能。

1、具有认真负责、吃苦耐劳、实事求是的工作态度和严谨细致的工作

素质目标

作风、良好的职业道德。

重点

函数getElement(s)ByXX的使用。

重点难点难点

解决方法读取和设置元素的属性值。

重点内容采用详述、多举实例方式讲解；难点内容以原理剖析、动画演示、操作演示等直

观的方式进行讲解。

1、梳理教材，备课，整理教学素材，标记书本重难点，理顺教学思路，修订完善课件。

2、提前发布教学视频，提醒学生登录教学平台自主观看视频，进行课前预习，如有疑问，

可发讨论和记笔记。

教学准备

3、教师登录网络教学平台，了解学生课前预学的进度统计，掌握学生课前预学的总体情

况。根据学生课前预学提交的问题讨论，有针对性地调整知识点讲解的内容。

4、检查机房的广播设备。

课后作业书本课后练习

能力训练项任务实现复选框全选

目

教学过程

（根据教学设计延续）

课前准备

1、登录网络教学平台，了解学生课前预学的进度统计，掌握学生课前预学的总体情况。根据学生课前预

学提交网络教学平台的问题讨论，有针对性地调整知识点讲解的内容。

2、使用超星学习通移动端，进行点名签到。

一、任务引入

1、在之前的课程中，我们已经学习了JavaScript读取网页元素的值。现公司在制作购物车的时候，需

要实现这个功能：当勾选全选时，对购物车里的所有物品全部选中进行结帐支付。那我们需要怎么样实

现？引入本节课任务——JavaScript实现复选框全选。

2、教师展示任务的效果。

二、任务内容

模拟商品的全选，当用户选择“全选”复选框时全选所有商品。当用户取消“全选”复选框时取消

所有商品的选择。

三、任务分析

制作复选框全选可以采用以下步骤：

1.创建静态页面index.html。

2.定义“全选”复选框的单击事件处理函数。

3.在单击事件处理函数中获取所有产品的复选框，统一设置复选框的选中和取消。

四、知识讲解

1、什么是DOM？

文档对象模型（DocumentObjectModel）

通过DOM可以动态改变文档内容

动态改变文档内容的原理

1、解析文档（如HTML）并生成DOM树

2、通过DOM标准接口+编程语言改变文档内容

解析文档生成DOM树的过程

html

head

titleDOM节点/title

/head

body

imgsrcimages/fruit.jpgalt图片ids1/

h1喜欢的水果/h1

pDOM应用/p

/body

/html

提问：DOM树的层次关系，和我们生活中的哪种关系相似？

答案：族谱

2、Document对象的常用属性和方法

Document对象对应着浏览器的整个网页，所有网页元素的访问都通过document对象

提问：getElementById和getElementsByName有何异同？

答案：相同的地方，都是找元素。不同地方，getElementById只能找回一个元素，getElementsByName

可找回多个元素。

3、三种访