JavaScript的bom对象

第12章对象模型与事件处理

JavaScript是一种面向对象的语言，使用对象模型可以描述JavaScript对象之间的层次关系。另外，JavaScript还可以捕捉到用户在浏览器中的操作，并对不同的操作进行响应，这就是JavaScript的事件驱动与事件处理。

12.1 对象模型

JavaScript中的对象并不是独立存在的，对象与对象之间存在着层次结构，对象模型的作用就是描述这些层次结构。

12.1.1 对象模型简介

对象模型是用来描述对象的逻辑层次结构以及其标准的操作方法的一个应用程序接口（API）。在JavaScript中，可以将对象模型分为以下几个组成部分。

核心部分（Core）：JavaScript的核心部分主要包括JavaScript的数据类型、运算符、表达式，以及JavaScript中内置的全局对象、全局属性和全局函数等。前面章节中所介绍的都是JavaScript的核心部分。

浏览器对象模型（Browser Object Model）：简称为BOM。浏览器对象模型提供了用户与浏览器之间交互的对象以及操作的接口。这些对象中，有很大一部分是与网页内容不相关的，如代表屏幕的Screen对象，代表浏览器的Navigator对象等。

文档对象模型（Document Object Model）：简称为DOM。文档对象模型是由World Wide Web（W3C）委员会所定义的标准文档对象模型，该模型是一个能够让程序或脚本动态地访问和更新文档内容、结构和样式的应用程序接口。DOM的版本可以分为DOM1、DOM2和DOM3。BOM虽然不是W3C中的标准，但是众多浏览器都能实现该对象模型，因此也被称为0级DOM。

12.1.2 客户端对象层次

浏览器的主要作用是显示一个HTML文档，在这种情况下，JavaScript使用Document对象代表HTML文档，使用Window对象代表显示该HTML文档的浏览器窗口，如图12-1所示。

在图12-1中所加载的HTML文件为光盘目录里"代码\第12章\sample01.htm"文件，该文件的内容如代码清单12-1所示。请注意加粗的文字。

代码清单12-1 简单的客户端对象层次

从图

顶层对象。而Document对象是代表HTML文档的对象，因此，该对象是Window 对象下的子对象。在前面章节中曾经介绍过，Document对象的write()方法可以在浏览器窗口中输出文字。因此，完整调用 Document对象的write()方法应该如下：

write()方法如以下代码：

所示。

12.1.3 浏览器对象模型

从12.1.2小节中可以看出，在JavaScript中对象之间并不是独立存在的，对象与对象之间有着层次关系。如Document对象是Window对象的子对象，Window 对象是Document对象的父对象等。

浏览器对象模型就是用于描述这种对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。图12-2是BOM的结构示意图。

从图12-2中可以看出，Window对象是BOM中的顶层对象，该对象代表了浏览器窗口。在Window对象之下有下述几个子对象。

Document对象：该对象代表浏览器窗口中所加载的文档。使用Document对象可以操作文档中的内容。在整个BOM中，只有Document对象是与HTML文档的内容相关的。

Frames数组：该数组代表浏览器窗口中的框架。HTML中允许将一个浏览器窗口分为多个框架，每个框架中可以加载一个HTML文档。在这种框架页中，每一个框架都是Frames数组中的一个元素。而Frames数组中的每一个元素都是一个Window对象。

History对象：该对象代表当前浏览器窗口的浏览历史。通过该对象可以将当前浏览器窗口中的文档前进或后退到某一个已经访问过的URL（统一资源定位符）。

Location对象：该对象代表当前文档的URL。URL分为几个部分，如协议部分、主机部分、端口部分等。使用Location对象可以分别获得这些部分，并且可以通过修改这些部分的值来加载一个新文档。

Navigator对象：该对象是浏览器对象，代表了浏览器的信息。该对象与Window 对象不同，Window对象可以用于控制浏览器窗口的一些属性，如浏览器窗口大小、位置等。而Navigator对象包含的是浏览器的信息，如浏览器的名称、版本号等。

Screen对象：该对象代表当前显示器的信息。使用Screen对象可以获得用户显示器的分辨率、可用颜色数量等信息。

Document对象代表HTML文档，而HTML文档中包括了有很多元素，BOM也将这些元素看成了不同的对象。从图12-2中可以看出，Document对象还有下述几个子对象。

Anchors数组：该数组代表了文档中的所有锚。数组中的每一个元素都是一个锚对象。每一个锚对象都对应着HTML文档中的一个包含name属性的标签，通过锚对象可以获得锚的命名，以及超链接中的文字。

Applets数组：该数组代表了嵌在网页中的所有小程序。数组中的每一个元素都是一个Applet对象，通过Applet对象可以获得Java小程序的公有字段。

Embeds数组：与Applets类似，但建议使用Embeds数组。

Forms数组：该数组代表文档中的所有表单。数组中的每一个元素都是一个Form 对象。每一个Form对象都对应着HTML文档中的一个

标签。通过Form

对象可以获得表单中的各种信息，也可以提交或重置表单。由于表单中还包括了很多表单元素，因此，Form对象的子对象还可以对这些表单元素进行引用，以完成更具体的应用。

Images数组：该数组代表文档中的所有图片。数组中的每一个元素都是一个Image对象。每一个Image对象都对应着HTML文档中的一个标签。通过Image对象可以获得图片的各种信息。