JavaScript程序设计案例教程（第2版）第5章DOM对象.ppt

本章节主要介绍JavaScript中DOM对象的使用，详细介绍了DOM中节点的概念和如何访问节点，重要介绍了document对象、form对象和Style对象的定义、属性和方法，还介绍了HTML DOM className 属性。通过本章的学习，读者可以使用DOM对象中的属性和方法实现表单特效和层显示隐藏等特效。 (1) 编写如图5.30所示的网页效果，实现如下功能：在前两个文本框中输入数值后，单击【求和】按钮可在第三个文本框中输出结果。 (2) 使用RadioButton实现以下效果：根据单选按钮中选择的相应颜色将颜色名显示在文本框内；选择黑色时，网页背景色为黑色，字体颜色为黄色；选择其他颜色，网页背景色根据所选颜色变换，字体颜色为黑色。网页背景色默认初始值为白色。效果图如图5.31所示。 图5.30 求和效果图 图5.31 RadioButton效果图 (3)通过选择单选按钮【12小时制】或【24小时制】，可以在文本框中动态显示当前时间，小时、分、秒数都以两位数字表示。运行效果如图5.32所示。 (4)实现如图5.33所示的滑过菜单效果：鼠标移上“个人信息”能显示下一级子菜单，移开则不显示。 图5.32 分时制动态显示时间效果图 图5.33 滑过菜单效果图 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 在网页编程中，经常需要使用JavaScript操作HTML文档中的元素，DOM（Document Object Model，文档对象模型）为操作HTML文档提供了规范、方便的方法。在JavaScript中每个HTML标记都可通过其Style对象设置CSS样式实现动态特效，利用这些对象可以很容易实现JavaScript编程速度并加强JavaScript程序功能。 知识目标 熟悉JavaScript中的DOM模型 熟悉HTML DOM文档的树状结构 熟悉document对象、form对象的常用属性、方法和事件 熟悉style对象常用属性及其含义 熟悉HTML DOM className属性的使用 能力目标 能熟练通过HTML DOM树形模型获取网页元素 能熟练运用document对象的getElementById()、getElementByName()等常用方法 能够熟练使用Style对象的相关属性和CSS属性丰富Web网页表现，如使用display显示属性实现层或图片的隐藏/显示和选项卡切换特效等 能够熟练使用className属性来获取元素并改变样式 4 案例陈述 1 2 3 案例实施 知识准备 本章小结 5 课后习题 5 本案例主要实现“教务管理—学生选课”超链接页面，主要内容包括两个下拉列表，可在其中选择相应的专业和班级，当选择不同的专业时，相应的班级就会发生改变，即专业“计算机信息管理”对应的班级有“11信息管理（IT)”、“12信息管理1”、“12信息管理2”、“13交通信息管理”，专业“计算机应用技术”对应的班级有“11嵌入式技术”、“11应用技术3G”、“12应用技术3G”、“13应用技术对口”，专业“计算机软媒技术”对应的班级有“11软件测试”、“12多媒体技术1”、“12多媒体技术2”、“13动漫设计与制作1”、“13动漫设计与制作2”；专业“计算机网络技术”对应的班级有“11应用技术CIW”、“12网络工程”、“13网络工程；开始超链接内容为“全要参加”，单击它上面的复选框可以全都选中，且该超链接内容变成“全不参加”；反之单击“全不参加 ”，则上面的选项都不被选；单击“计算”按钮可以计算出所现课程的总学分。 图5.1选择专业后的班级结果图 图5.2 单击“全参加”后的运行结果图 1)使用Dreamweaver，新建网页“Case8.html”。在设计视图下选择【插入】|【表单】菜单命令，创建名称为kcForm的表单，再分别插入两个下拉列表框、复选按钮组、文字超链接和“计算”按钮。 2)在代码视图中修改body…/body间控件所需响应事件的代码。 3)在head…/head间添加代码。 知识点1 document对象 1)document对象概述 文档对象(document)代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此window对象中的方法和子对象不需要使用window来引用。 2)document对象的属性 document对象的属性见表5-1。 3)document对象的方法 document对象的方法见表5-2。 图5.6 DOM对象模型图 【实例5-1】document对象的应用