JavaScript高级程序设计第三版（一）ECMAScript与DOM与BOM

虽然 Javascript 和 ECMAScript 通常都被人们用来表达
相同的含义&＃xff0c;但 Javascript 的含义却比 ECMA-262 中规定的
要多得多。没错&＃xff0c;一个完整的 Javascript 实现应该由下列三
个不同的部分组成&＃xff08;见图 1-1&＃xff09;。

• 核心&＃xff08;ECMAScript&＃xff09;
• 文档对象模型&＃xff08;DOM&＃xff09;
• 浏览器对象模型&＃xff08;BOM&＃xff09;

 ECMAScript 

由 ECMA-262 定义的 ECMAScript 与 Web 浏览器没有依赖关系。实际上&＃xff0c;这门语言本身并不包含输
入和输出定义。ECMA-262 定义的只是这门语言的基础&＃xff0c;而在此基础之上可以构建更完善的脚本语言。
我们常见的 Web 浏览器只是 ECMAScript 实现可能的宿主环境之一。宿主环境不仅提供基本的
ECMAScript 实现&＃xff0c;同时也会提供该语言的扩展&＃xff0c;以便语言与环境之间对接交互。而这些扩展——如
DOM&＃xff0c;则利用 ECMAScript 的核心类型和语法提供更多更具体的功能&＃xff0c;以便实现针对环境的操作。其他
宿主环境包括 Node&＃xff08;一种服务端 Javascript 平台&＃xff09;和 Adobe Flash。
既然 ECMA-262 标准没有参照 Web 浏览器&＃xff0c;那它都规定了些什么内容呢&＃xff1f;大致说来&＃xff0c;它规定了这
门语言的下列组成部分&＃xff1a;

• 语法
• 类型
• 语句
• 关键字
• 保留字
• 操作符
• 对象

ECMAScript 就是对实现该标准规定的各个方面内容的语言的描述。Javascript 实现了 ECMAScript&＃xff0c;
Adobe ActionScript 同样也实现了 ECMAScript

文档对象模型&＃xff08;DOM&＃xff09;

文档对象模型&＃xff08;DOM&＃xff0c;Document Object Model&＃xff09;是针对 XML 但经过扩展用于 HTML 的应用程序编
程接口&＃xff08;API&＃xff0c;Application Programming Interface&＃xff09;。DOM 把整个页面映射为一个多层节点结构。HTML
或 XML 页面中的每个组成部分都是某种类型的节点&＃xff0c;这些节点又包含着不同类型的数据。看下面这个
HTML 页面

Hello World!

1111在 DOM 中&＃xff0c;这个页面可以通过图 1-2 所示的分层节点图表示。

通过 DOM 创建的这个表示文档的树形图&＃xff0c;开发人员获得了控制页面内容和结构的主动权。借助
DOM 提供的 API&＃xff0c;开发人员可以轻松自如地删除、添加、替换或修改任何节点。
1. 为什么要使用 DOM 
在 Internet Explorer 4 和 Netscape Navigator 4 分别支持的不同形式的 DHTML&＃xff08;Dynamic HTML&＃xff09;基
础上&＃xff0c;开发人员首次无需重新加载网页&＃xff0c;就可以修改其外观和内容了。然而&＃xff0c;DHTML 在给 Web 技术发
展带来巨大进步的同时&＃xff0c;也带来了巨大的问题。由于 Netscape 和微软在开发 DHTML 方面各持己见&＃xff0c;过
去那个只编写一个 HTML 页面就能够在任何浏览器中运行的时代结束了。
对开发人员而言&＃xff0c;如果想继续保持 Web 跨平台的天性&＃xff0c;就必须额外多做一些工作。而人们真正担
心的是&＃xff0c;如果不对 Netscape 和微软加以控制&＃xff0c;Web 开发领域就会出现技术上两强割据&＃xff0c;浏览器互不兼容的局面。此时&＃xff0c;负责制定 Web 通信标准的 W3C&＃xff08;World Wide Web Consortium&＃xff0c;万维网联盟&＃xff09;开始着
手规划 DOM。

2. DOM 级别
DOM1 级&＃xff08;DOM Level 1&＃xff09;于 1998 年 10 月成为 W3C 的推荐标准。DOM1 级由两个模块组成&＃xff1a;DO
核心&＃xff08;DOM Core&＃xff09;和 DOM HTML。其中&＃xff0c;DOM 核心规定的是如何映射基于 XML 的文档结构&＃xff0c;以便
简化对文档中任意部分的访问和操作。DOM HTML 模块则在 DOM 核心的基础上加以扩展&＃xff0c;添加了针
对 HTML 的对象和方法。
请读者注意&＃xff0c;DOM 并不只是针对 Javascript 的&＃xff0c;很多别的语言也都实现了 DOM。
不过&＃xff0c;在 Web 浏览器中&＃xff0c;基于 ECMAScript 实现的 DOM 的确已经成为 Javascript 这
门语言的一个重要组成部分。
如果说 DOM1 级的目标主要是映射文档的结构&＃xff0c;那么 DOM2 级的目标就要宽泛多了。DOM2 级在
原来 DOM 的基础上又扩充了&＃xff08;DHTML 一直都支持的&＃xff09;鼠标和用户界面事件、范围、遍历&＃xff08;迭代 DOM
文档的方法&＃xff09;等细分模块&＃xff0c;而且通过对象接口增加了对 CSS&＃xff08;Cascading Style Sheets&＃xff0c;层叠样式表&＃xff09;的
支持。DOM1 级中的 DOM 核心模块也经过扩展开始支持 XML 命名空间。
DOM2 级引入了下列新模块&＃xff0c;也给出了众多新类型和新接口的定义。

•  DOM 视图&＃xff08;DOM Views&＃xff09;&＃xff1a;定义了跟踪不同文档&＃xff08;例如&＃xff0c;应用 CSS 之前和之后的文档&＃xff09;视图接口&＃xff1b;
•  DOM 事件&＃xff08;DOM Events&＃xff09;&＃xff1a;定义了事件和事件处理的接口&＃xff1b;
•  DOM 样式&＃xff08;DOM Style&＃xff09;&＃xff1a;定义了基于 CSS 为元素应用样式的接口&＃xff1b;
•  DOM 遍历和范围&＃xff08;DOM Traversal and Range&＃xff09;&＃xff1a;定义了遍历和操作文档树的接口

DOM3 级则进一步扩展了 DOM&＃xff0c;引入了以统一方式加载和保存文档的方法——在 DOM 加载和保
存&＃xff08;DOM Load and Save&＃xff09;模块中定义&＃xff1b;新增了验证文档的方法——在 DOM 验证&＃xff08;DOM Validation&＃xff09;模块中定义。DOM3 级也对 DOM 核心进行了扩展&＃xff0c;开始支持 XML 1.0 规范&＃xff0c;涉及 XML Infoset、XPath
和 XML Base。
在阅读 DOM 标准的时候&＃xff0c;读者可能会看到 DOM0 级&＃xff08;DOM Level 0&＃xff09;的字眼。
实际上&＃xff0c;DOM0 级标准是不存在的&＃xff1b;所谓 DOM0 级只是 DOM 历史坐标中的一个参照
点而已。具体说来&＃xff0c;DOM0 级指的是 Internet Explorer 4.0 和 Netscape Navigator 4.0 最
初支持的 DHTML。
3. 其他 DOM 标准
除了 DOM 核心和 DOM HTML 接口之外&＃xff0c;另外几种语言还发布了只针对自己的 DOM 标准。下面
列出的语言都是基于 XML 的&＃xff0c;每种语言的 DOM 标准都添加了与特定语言相关的新方法和新接口&＃xff1a;

•  SVG&＃xff08;Scalable Vector Graphic&＃xff0c;可伸缩矢量图&＃xff09;1.0&＃xff1b;
• MathML&＃xff08;Mathematical Markup Language&＃xff0c;数学标记语言&＃xff09;1.0&＃xff1b;
• SMIL&＃xff08;Synchronized Multimedia Integration Language&＃xff0c;同步多媒体集成语言&＃xff09;。

还有一些语言也开发了自己的 DOM 实现&＃xff0c;例如 Mozilla 的 XUL&＃xff08;XML User Interface Language&＃xff0c;XML
用户界面语言&＃xff09;。但是&＃xff0c;只有上面列出的几种语言是 W3C 的推荐标准。
4. Web 浏览器对 DOM 的支持
在 DOM 标准出现了一段时间之后&＃xff0c;Web 浏览器才开始实现它。微软在 IE5 中首次尝试实现 DOM&＃xff0c;
但直到 IE5.5 才算是真正支持 DOM1 级。在随后的 IE6 和 IE7 中&＃xff0c;微软都没有引入新的 DOM 功能&＃xff0c;而
到了 IE8 才对以前 DOM 实现中的 bug 进行了修复。
Netscape 直到 Netscape 6&＃xff08;Mozilla 0.6.0&＃xff09;才开始支持 DOM。在 Netscape 7 之后&＃xff0c;Mozilla 把开发重心转
向了 Firefox 浏览器。Firefox 3 完全支持 DOM1 级&＃xff0c;几乎完全支持 DOM2 级&＃xff0c;甚至还支持 DOM3 级的一部
分。&＃xff08;Mozilla 开发团队的目标是构建与标准 100%兼容的浏览器&＃xff0c;而他们的努力也得到了回报。&＃xff09;
目前&＃xff0c;支持 DOM 已经成为浏览器开发商的首要目标&＃xff0c;主流浏览器每次发布新版本都会改进对 DOM
的支持。下表列出了主流浏览器对 DOM 标准的支持情况

浏览器对象模型&＃xff08;BOM&＃xff09; 

Internet Explorer 3 和 Netscape Navigator 3 有一个共同的特色&＃xff0c;那就是支持可以访问和操作浏览器窗
口的浏览器对象模型&＃xff08;BOM&＃xff0c;Browser Object Model&＃xff09;。开发人员使用 BOM 可以控制浏览器显示的页面
以外的部分。而 BOM 真正与众不同的地方&＃xff08;也是经常会导致问题的地方&＃xff09;&＃xff0c;还是它作为 Javascript 实现
的一部分但却没有相关的标准。这个问题在 HTML5 中得到了解决&＃xff0c;HTML5 致力于把很多 BOM 功能写
入正式规范。HTML5 发布后&＃xff0c;很多关于 BOM 的困惑烟消云散。
从根本上讲&＃xff0c;BOM 只处理浏览器窗口和框架&＃xff1b;但人们习惯上也把所有针对浏览器的 Javascript 扩展
算作 BOM 的一部分。下面就是一些这样的扩展&＃xff1a;

•  弹出新浏览器窗口的功能&＃xff1b;
•  移动、缩放和关闭浏览器窗口的功能&＃xff1b;
•  提供浏览器详细信息的 navigator 对象&＃xff1b;
•  提供浏览器所加载页面的详细信息的 location 对象&＃xff1b;
•  提供用户显示器分辨率详细信息的 screen 对象&＃xff1b;
•  对 COOKIEs 的支持&＃xff1b;
•  像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

由于没有 BOM 标准可以遵循&＃xff0c;因此每个浏览器都有自己的实现。虽然也存在一些事实标准&＃xff0c;例如
要有 window 对象和 navigator 对象等&＃xff0c;但每个浏览器都会为这两个对象乃至其他对象定义自己的属
性和方法。现在有了 HTML5&＃xff0c;BOM 实现的细节有望朝着兼容性越来越高的方向发展。第 8 章将深入讨
论 BOM。

小结
Javascript 是一种专为与网页交互而设计的脚本语言&＃xff0c;由下列三个不同的部分组成&＃xff1a;

• ECMAScript&＃xff0c;由 ECMA-262 定义&＃xff0c;提供核心语言功能&＃xff1b;

• 文档对象模型&＃xff08;DOM&＃xff09;&＃xff0c;提供访问和操作网页内容的方法和接口&＃xff1b;

• 浏览器对象模型&＃xff08;BOM&＃xff09;&＃xff0c;提供与浏览器交互的方法和接口。

Javascript 的这三个组成部分&＃xff0c;在当前五个主要浏览器&＃xff08;IE、Firefox、Chrome、Safari 和 Opera&＃xff09;中
都得到了不同程度的支持。其中&＃xff0c;所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错&＃xff0c;而对
ECMAScript 5 的支持程度越来越高&＃xff0c;但对 DOM 的支持则彼此相差比较多。对已经正式纳入 HTML5 标
准的 BOM 来说&＃xff0c;尽管各浏览器都实现了某些众所周知的共同特性&＃xff0c;但其他特性还是会因浏览器而异。