
1.3 浏览器战争
Netscape Navigator 4发布于1997年6月,IE 4发布于同年10月。这两种浏览器都对它们的早期版本进行了许多改进,大幅扩展了DOM,使能够通过JavaScript完成的功能大大增加。而网页设计人员也开始接触到一个新名词:DHTML。
1.3.1 DHTML
DHTML是“Dynamic HTML”(动态HTML)的简称。DHTML并不是一项新技术,而是描述HTML、CSS和JavaScript技术组合的术语。DHTML背后的含义是:
❑ 利用HTML把网页标记为各种元素;
❑ 利用CSS设置元素样式和它们的显示位置;
❑ 利用JavaScript实时地操控页面和改变样式。
利用DHTML,复杂的动画效果一下子变得非常容易实现。例如,用HTML标记一个页面元素:

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

接下来,只需利用JavaScript改变myelement元素的left和top样式,就可以让它在页面上随意移动。不过,这只是理论而已。
不幸的是,NN 4和IE 4浏览器使用的是两种不兼容的DOM。换句话说,虽然浏览器制造商的目标一样,但他们在解决DOM问题时采用的办法却完全不同。
1.3.2 浏览器之间的冲突
Netscape公司的DOM使用了专有元素,这些元素称为层(layer)。层有唯一的ID, JavaScript代码需要像下面这样引用它们:

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

这两种DOM的差异并不止这一点。假设你想找出myelement元素的left位置并把它赋值给变量xpos,那么在Netscape Navigator 4浏览器里必须这样做:

而在IE 4浏览器中,需要使用如下所示的语句才能完成同样的工作:

这就导致了一种很可笑的局面:程序员在编写DOM脚本代码时必须知道它们将运行在哪种浏览器环境里,所以在实际工作中,许多脚本都不得不编写两次,一次为Netscape Navigator,另一次为IE。同时,为了确保能够正确地向不同的浏览器提供与之相应的脚本,程序员还必须编写一些代码去探查在客户端运行的浏览器到底是哪一种。
DHTML打开了一个充满机会的新世界,但想要进入其中的人们却发现这是个充满苦难的世界。因此,没多久,DHTML就从一个大热门变成了一个人们不愿提起的名词,而对这种技术的评价也很快地变成了“宣传噱头”和“难以实现”。