实验三 BOM与DOM编程 下载本文

实验三 BOM与DOM编程

(一)实验目的

1. 掌握window对象、location对象、history对象和Document对象的常用方法。 2. 掌握JavaScript获取网页元素的三种方法。

3. 掌握使用getElement系列方法实现DOM元素的查找和定位。 4. 掌握使用CoreDOM实现节点的获取、添加与删除等操作。

5. 重点掌握使用HTMLDOM操作表格数据,实现节点的增加与删除操作。 (二)实验器材

计算机硬件环境:PIII 667以上计算机;软件环境:Dreamweaver。 (三)实验学时 8学时

(四)实验内容

1. 制作弹出窗口。打开当前页面时,窗口右下角自动弹出广告窗口,并且可以关闭广告窗口。

2.制作逐渐变大的窗口效果。 3.动态页面跳转。 4.模拟分页效果。

5.制作轮换显示的广告图片。在图片显示区添加数字编号,当显示到某幅图片时,该图片对应的数字序号将高亮显示。

执行效果如下图所示:

6. 制作Tab切换菜单。页面初始状态为下图左侧内容,当鼠标指针移动到“游戏卡点”选项卡上时,状态更改为下图右侧内容。当鼠标指针移动到“手机充值”选项卡上时,页面恢复为初始状态。

【提示】对象的显示与隐藏

7. 制作停靠菜单。初始时菜单停靠在页面左侧,鼠标指针移动到“菜单”文字上时,鼠标指针离开菜单内容时,菜单又收缩并停靠在页面左侧。

执行效果如下图所示:

8. 表格隔行换色。完善实验一中的表格,实现隔行换色效果。

9. 使用CoreDOM操作表格数据。页面初始状态如下,使用CoreDOM相关方法完成下图所需功能。

10. 使用HTMLDOM操作表格数据。页面初始状态如下,使用HTMLDOM相关方法完成下图所需功能。