JavaScript DOM编程艺术学习心得系列 ——（二）DOM与浏览器战争

DOM与浏览器战争

继上一篇介绍过JavaScript 之后，我门要来看一看 DOM 和浏览器战争这块的事情了。这一部分完结之后，总结系列将要开始介绍复习一下 JavaScript 语法的部分了。

1.DOM

什么是 DOM ？文档对象模型，DOM 是一套对文档的内容进行抽象和概念化得方法。何为文档对象模型？可以举一个例子，“世界对象模型”即人们对现实世界的普遍的认识，只要每个人都有“世界对象模型”，那么当小A告诉小B“我中午吃的米饭”时，小B不会以为小A告诉他“你昨晚睡得地板”。“世界对象模型”可以用来描述客观存在的食物，也可以用来描述抽象概念，其原因就在于人们对这些名词所代表的的东西有着同样的认识。
这个道理对于网页也同样适用。JavaScript 的早期版本向程序员提供了查询和操纵 Web 文档某些实际内容（主要是图像和表单）的手段。因为 JavaScript 预先定义了“images”和“forms”等术语，我们才能像下面这样在 JavaScript 脚本里引用“文档中的第三个图像”或“文档中名为‘details’的表单”：

document.images[2]
document.forms['details']

现在的人们通常把这种实验性质的初级 DOM 称为“第0级 DOM ”（DOM Level 0）。在还未形成统一标准的初期阶段，“第0级 DOM ”的常见用途是翻转图片和验证表单数据。Netscape 和微软公司各自推出第四代浏览器产品以后，DOM 开始遇到麻烦，陷入困境，由此引出了下文浏览器战争的事。

2.浏览器战争

这一块浏览器战争的介绍，我只是借用这个名字，主要内容是浏览器战争期间 DOM 的发展。至于为什么用这个名字，是因为 DOM 标准的制定就是发生在浏览器战争期间，而且浏览器战争也让人们认识到了一个通用的 DOM 标准有多重要。

2.1 DHTML

Netscape Navigator 4 发布与 1997 年 6 月，IE 4 发布于同年 10 月。这两种浏览器对它们的早期版本进行了许多改进，大幅扩展了 DOM，使能够通过 JavaScript 完成的功能大大增加。而网页设计人员也开始接触到一个新名词：DHTML。
DHTML 是“Dynamic HTML”（动态 HTML）的简称。DHTML 并不是一项新技术，而是描述 HTML、CSS 和 JavaScript 技术组合的术语。DHTML背后的含义是：

利用 HTML 把网页标记为各种元素；
利用 CSS 设置元素样式和它们的显示位置；
利用 JavaScript 实时地操纵页面和改变样式。

利用 DHTML，复杂的动画效果一下子变得非常容易实现。举个例子，用 HTML 标记一个页面元素：

<div id="myelement"> This is my element </div>

然后用 CSS 为这个页面元素定义如下位置样式：

#myelement{position:absolute;left:50px;top:100px;
}

接下来，只需利用 JavaScript 改变myelement 元素的 left 和 top 样式，就可以让他在页面上随意移动。不过，这只是理论而已。
不幸的是，Netscape Navigator 4 和IE 4 浏览器使用的是两种不兼容的 DOM ，虽然浏览器制造商的目标是一样的，但他们在解决 DOM 问题时采用的办法却完全不同，这也是浏览器战争的起源。

2.2 浏览器战争时不同的DOM

Netscape 公司的 DOM 使用了专有元素，这些元素称为层（layer）。层有唯一的 ID，JavaScript 代码需要像下面这样引用它们：

document.layers['myelement']

而在微软公司的 DOM 中这个元素必须像下面这样引用：

document.all['myelement']

还有，如果你想找出 myelement 元素的 left 位置并把它赋值给变量 xpos，那么在 Netscape Navigator 4 浏览器里必须这样做：

var xpos = document.layers['myelement'].left;

而在 IE4 浏览器中，必须这样做：

var xpos = document.all['element'].leftpos;

这也导致了一种很可笑的局面：程序员在编写 DOM 脚本代码时必须知道它们将运行在哪种浏览器环境中。所以在实际工作中，许多脚本都不得不编写两次，一次为 Netscape Navigator ，一次为 IE。同时，为了确保能够正确地向不同的浏览器提供与之相对应的脚本，程序员还必须编写一些代码去探查在客户端运行的浏览器到底是哪一种。

2.3 浏览器战争的结局

浏览器市场份额大战中微软公司笑到了最后，但是 IE 浏览器注定能够战胜其他浏览器不过是因为所有运行 Windows 操作系统的个人电脑都预装了它。
受浏览器战争影响最大的人群是那些网站设计人员，跨浏览器开发曾经是他们的噩梦。浏览器制造商的自私态度遭到人们的激烈反对，Web 标准计划（简称 WaSP，http://webstandards.org/）小组应运而生。或许是因为 WaSP 小组的压力，又或许是因为企业的内部决策，下一代浏览器产品对Web 标准的支持得到了极大的改善。
今天，几乎所有的浏览器都内置了对 DOM 的支持。Web 设计师的日子已经今非昔比。现在已经可以实现“编写一次，随处运行”，只要遵守 DOM 标准，就可以放心大胆的去做，因为你的脚本无论在哪里都不会遇到问题。

2.4 指定 DOM 标准

就在浏览器制造商以 DOM 为武器展开营销大战的同时，W3C 不事声张地结合大家的优点推出了一个标准化的 DOM。令人欣慰的是，Netscape、微软和其他一些浏览器制造商们抛开了彼此的敌意而与 W3C 携手制定了新的标准，并与 1998 年 10 月完成了“第一级 DOM ”（DOM Level 1）。
前面我们用

标签定义了一个 ID 为 myelement 的页面元素，下面是用新的标准化 DOM 的语法来找到 left 位置并把这个值保存到变量 xpos 中：

var xpos = document.getElementById('myelement').style.left

DOM是一种 API（应用编程接口）。简单地说，API 就是一组已经得到有关各方共同认可的基本约定。现实世界中的 API 相当于摩尔斯码、国际时区、化学元素周期表。在软件编程领域中，虽然存在着多种不同的语言，但是 API 相当于一个标准，可以应用在许多不同的环境中，虽然语法会因为使用的程序设计语言而有所变化，但这些约定却总是保持不变的。
W3C 对 DOM 的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。”

3.没啥用的后记

到这里序章就结束了，之后在正式介绍 DOM 脚本程序设计技巧之前，我将先简要地复习一下 JavaScript 的语法。