Web前端开发实例与实战第9 章 BOM和DOM编程.pdfVIP

编写日期：授课日期：任课教师：

课程《Web前端开发实例与授课授课

名称实战》专业班级

授课授课

周次节次第9章4学时

章BOM和DOM编程学时

1.了解BOM。

2.了解DOM。

知识

3.了解文档事件。

4.了解BOM模型。

教学1.熟知HTML对象集合。

目标2.能够对元素内容进行修改。

能力

3.能够添加元素。

4.熟知window对象的常用属性。

素质培养学生的社会责任感和创新能力。

教学

window对象的常用属性

重点

教学

window对象的常用方法

难点

教学

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

方法

教学多媒体、课件

用具

第9章BOM和DOM编程

9.1DOM模型

文档对象模型（documentobjectmodel，DOM），它是一项W3C的标准。当浏览器加

载HTML文档时就会创建DOM模型。DOM模型包含了所有的HTML元素，包括标签、元素内

教学

容、属性、访问HTML元素的方法及事件。

内容

9.2元素控制

HTMLDOM是HTML的标准对象模型和编程接口。在DOM中，所有的元素都被定义为对

象。通过DOM对象的方法可以实现对元素的查找、添加和删除的操作；通过属性，可以设

置每个元素的属性值。

9.2.1查找元素

在DOM中，实现元素的查找需要使用document对象的方法。该方法通过元素的id属

性、元素的名称、元素的class属性、CSS选择器及对象集合，找到对应的元素。

1.id查找

通过标签的id属性查找标签是JavaScript中最常用的方式。通过该方法查找的元素

结果为单个元素对象，其语法形式如下所示。

document.getElementById(id);

其中，id为元素的属性值。

2.标签名查找

通过标签名查找元素会得到指定名称的所有标签，所以查找的结果是一个数组。可以

使用数组下标依次访问查找到的元素，其语法形式如下所示。

document.getElementsByTagName(name);

其中，name为要查找的标签名称。

3.类名查找

由于多个元素可以使用相同的类名，所以使用类名查找的元素的结果也是一个数组，

其语法形式如下所示。

document.getElementsByClassName(name);

其中，name是指标签的Class属性