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

最新推荐文章于 2022-03-17 11:16:04 发布

安果移不动

最新推荐文章于 2022-03-17 11:16:04 发布

阅读量381

点赞数

分类专栏： # javascript

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/88346700

版权

javascript 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

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

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

ECMAScript

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

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

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

文档对象模型（DOM）

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

<html> 
 <head> 
 <title>Sample Page</title> 
 </head> 
 <body> 
 <p>Hello World!</p> 
 </body> 
</html>

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

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

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

DOM 视图（DOM Views）：定义了跟踪不同文档（例如，应用 CSS 之前和之后的文档）视图接口；
DOM 事件（DOM Events）：定义了事件和事件处理的接口；
DOM 样式（DOM Style）：定义了基于 CSS 为元素应用样式的接口；
DOM 遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口

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

SVG（Scalable Vector Graphic，可伸缩矢量图）1.0；
MathML（Mathematical Markup Language，数学标记语言）1.0；
SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）。

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

浏览器对象模型（BOM）

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

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

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

小结
JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：

ECMAScript，由 ECMA-262 定义，提供核心语言功能；
文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

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

安果移不动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 高级程序设计第三版（一） ECMAScript与DOM与BOM

虽然 JavaScript 和 ECMAScript 通常都被人们用来表达相同的含义，但 JavaScript 的含义却比 ECMA-262 中规定的要多得多。没错，一个完整的 JavaScript 实现应该由下列三个不同的部分组成（见图 1-1）。核心（ECMAScript）文档对象模型（DOM）浏览器对象模型（BOM）ECMAScript由 ECMA-26...
复制链接

扫一扫