第五章DOM编程.ppt

第五章 DOM编程 DOM介绍 window对象 document对象 body对象 form对象 form表单字段元素对象 * DOM(Document Object Model 文档对象模型)：JavaScript将浏览器本身、网页文档、网页文档中的HTML元素等都用相应的内置对象来表示，其中的一些对象是作为另外的一些对象的属性而存在的，这些对象及对象之间的层次关系统称为DOM。 5.1　　DOM与DHTML DHTML（Dynamic HTML）：CSS、脚本编程语言和DOM的结合使用，使得HTML文档与用户具有交互性和动态变换性。这三种技术的单一称谓叫DHTML。 window location frames history event screen document links anchors images forms filters frames all stylesheets body window对象处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性。该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。 在使用时应注意以下几点： 该对象对应于HTML文档中的Body和FrameSet两种标识； onload和onunload都是窗口对象属性； 在JavaScript脚本中可直接引用窗口对象。如： window.alert(窗口对象输入方法) 可直接使用以下格式： alert(窗口对象输入方法) 5.2 window对象 window对象： 创建一个新窗口open() 使用window.open（参数表）方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名。 具有OK按钮的对话框 alert()方法能创建一个具有OK按钮的对话框。 具有OK和Cancel按钮的对话框 confirm()方法为编程人员提供一个具有两个按钮的对话框。 具有输入信息的对话框 prompt()方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下prompt（“提示信息”，默认值）。 5.2 window对象 window对象的方法： 例5-1.html与5-1a.html closed属性:返回ture或false，表示window对象对应的窗口是否关闭。 Opener属性：返回打开当前窗口的那个window对象。 defaultstatus:默认状态，它的值显示在窗口的状态栏中。 status:包含文档窗口中帧中的当前信息。 5.2 window对象 window对象的属性： 例5-2.html与5-2a.html 实现浏览器状态栏上移动的显示效果，可以在显示的文本前逐渐增加空格，看例5-2.html 5.2 window对象 window对象的事件 ： 窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。 onclick事件 onmouseover事件 onmouseout事件 …………… 例5-3.html与5-3a.html 5.2 window对象 window对象的对象属性： 1、location对象 设置和返回当前网页的URL信息。 它有常用的href属性，replace方法，reload方法  例5-4.html 5.2 window对象 window对象的对象属性： 2、event对象 用于获取和设置当前事件的有关信息，。 Event对象中的属性： altKey;ctrlKey；shiftKey；returnValue；button；keyCode  例event.html;5-5.html 5.2 window对象 window对象的对象属性： 3、frames数组 frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问: parent.frames[Index1].location.reload() frames数组对象中的每个元素，都是frames对象中的一个属性，属性名就是各个帧窗口的名称，因此，帧窗口对象也可以通过使用属性名的方式来访问。另外，应用window对象的属性和方法时，可以省略“window.”前缀。 下面是各种访问帧窗口对象的方式： input type= button value=刷新 onclick=window.parent.frames[1].location.reload()onclick=parent.frame