第7章DOM编程讲述.ppt

第7章 DOM编程 内 容 提 要 7.1 BOM和DOM概述 浏览器对象模型（Browser Object Model, BOM）是用于描述对象与对象之间层次关系的模型，该模型提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。 BOM也可以称为窗口对象模型（Window Object Model），当浏览器打开一个网页文件时，window对象对应着浏览器窗口本身。 浏览器对象模型的层次结构 文档对象模型（Document Object Model, DOM）是一种用于HTML和XML文档的编程接口。 DOM为文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方法，DOM可以把网页、脚本以及其他的编程语言联系起来。 DOM可以看作是HTML页面的模型，是一套对文档的内容进行抽象和概念化的方法。 在DOM中，HTML的每个标签元素被作为一个对象。JavaScript通过调用DOM中的属性、方法可以对网页中的标签元素进行控制。例如读取页面中文本框的值、设置文本框的值等。 为了避免各种不同的浏览器提供的DOM对象的不同所带来的操作的不便，Netscape、IE以及其它的浏览器制造商与W3C一同推出了标准化的DOM，并于1998年10月完成了DOM Level 1。 W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改”。 标准化的DOM，在独立性和适用范围等各方面，都远远超过了各个浏览器专有的DOM。 7.2 JavaScript事件 JavaScript采用了事件驱动的响应机制，用户在网页上的交互操作，会触发相应的事件。 当事件发生时，系统可以调用JavaScript中指定的事件处理函数进行处理。 事件可以被JavaScript侦测到。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。 例如，当点击网页上的某个按钮时，此按钮的onClick事件发生，可以触发某个函数。 JavaScript中事件分为一般事件、页面相关事件、表单相关事件、数据绑定事件等。 Javascript中的一般事件 JavaScript中的页面相关事件 JavaScript中的表单相关事件 7.3 window对象 window对象是最主要的宿主对象，也是最顶层的宿主对象，是其它宿主对象的父对象。 window对象对应的浏览器窗口本身。 如果网页中包含框架集，则每个框架对应一个Window对象，并且原网页也对应一个Window对象。 只要打开了浏览器窗口，不管该窗口中是否有打开的网页、当遇到body、frameset或者frame时，都会自动创建window对象的实例。 7.3.1 window对象的属性 window对象有很多属性，其中常用的属性如表所示。 例如js1.html，当鼠标移动到超级链接上方时，浏览器的状态栏显示欢迎信息。 js1.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 titlewindow对象的defaultStatus属性和status属性/title script window.defaultStatus=这是状态栏的默认信息！; function change(){ window.status=当把鼠标移到图像上方时，状态栏显示的信息！; } /script /head body a href= onMouseOver=change();return true img src=image/flower1.jpg width=200 border=0/ /a /body /html 当把鼠标移到图像上方时，浏览器的地址栏里的信息会发生变化。 7.3.2 window对象的方法 window对象的方法很多，可以分为窗体控制方法、对话框方法、时间等待与间隔方法。 1．窗体控制方法 （1）focus()和blur() focus()和blur()分别为窗体或控件获取焦点和失去焦点，例如js2.html，使用焦点变化来验证表单数据的合法性。 js2.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=tex