《Javascript_DOM编程》由会员分享，可在线阅读，更多相关《Javascript_DOM编程（80页珍藏版）》请在金锄头文库上搜索。
1、第1章 JavaScript简史本章内容JavaScript的起源浏览器之争DOM的演变史对网页设计人员来说，这是一个充满着挑战和机遇的时代。近几年来，网页设计工作已经从一种混乱无序和即兴发挥的状态，逐渐发展为一种有着成熟的设计原则可供遵循的流水线作业。有越来越多的网页设计人员开始采用一种标准化的思路来建立网站，而实现这一思路和方法的具体技术则称为“Web标准”。当网页设计人员谈论起与Web标准有关的话题时，XHTML（可扩展的超文本标记语言）和CSS（层叠样式表）通常占据着核心地位。不过，由W3C（万维网联盟）批准并由所有与标准相兼容的Web浏览器支持的第三方技术称为DOM（文档对象模型）。
2、我们可以利用DOM去改善文档的可交互性，就像我们可以利用CSS给文档添加各种样式一样。在开始学习DOM之前，我们先回顾一下使网页具备可交互性的程序设计语言。这种语言就是JavaScript，它已经诞生相当长的时间了。1.1JavaScript的起源JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScript出现之后，网页的内容不再局限于枯燥的文本，它们的可交互性得到了显著的改善。JavaScript的第一个版本，即JavaScript 1.0版本，出现在1995年推出的Net
3、scape Navigator 2浏览器中。在JavaScript 1.0发布时，Netscape Navigator主宰着浏览器市场，微软的IE浏览器则扮演着追赶者的角色。微软在推出IE 3的时候发布了自己的VBScript语言并以JScript为名发布了JavaScript的一个版本，以此很快跟上了Netscape的步伐。面对微软公司的竞争，Netscape和Sun公司联合ECMA（欧洲计算机制造商协会）对JavaScript语言进行了标准化。其结果就是ECMAScript语言，这使得同一种语言又多了一个名字。虽说ECMAScript这个名字没有流行开来，但人们现在谈论的JavaScrip
4、t实际上就是ECMAScript。到了1996年，JavaScript、ECMAScript、JScript随便你们怎么称呼它，已经站稳了脚跟。Netscape和微软公司在它们各自的第3版浏览器中都不同程度地提供了对JavaScript 1.1语言的支持。这里必须指出的是，JavaScript与Sun公司开发的Java程序语言没有任何联系。人们最初给JavaScript起的名字是LiveScript，后来选择“JavaScript”作为其正式名称的原因，大概是想让它听起来有系出名门的感觉，但令人遗憾的是，这一选择反而更容易让人们把这两种语言混为一谈，而这种混淆又因为各种Web浏览器确实具备这样
5、或那样的Java客户端支持功能的事实被进一步放大和加剧。事实上，虽说Java在理论上几乎可以部署在任何环境中，但JavaScript却只局限于Web浏览器。JavaScript是一种脚本语言，JavaScript脚本通常只能通过Web浏览器去完成某种操作而不是像普通意义上的程序那样可以独立运行。因为需要由Web浏览器进行解释和执行，所以JavaScript脚本不像Java和C+等编译型程序设计语言那样用途广泛。不过，这种相对的简单性也正是JavaScript的长处：因为比较容易学习和掌握，所以JavaScript很受那些本身不是程序员，但希望能够通过简单的剪贴操作把脚本嵌入他们的现有网页中的普
6、通用户们的欢迎。JavaScript还向程序员提供了一种操控Web浏览器的手段。例如，JavaScript语言可以用来调整Web浏览器窗口的高度、宽度和屏显位置等属性。以这种办法给出Web浏览器本身的属性可以看做是BOM（浏览器对象模型）。JavaScript的早期版本还提供了一种初级的DOM（文档对象模型）。什么是DOM简单地说，DOM是一套对文档的内容进行抽象和概念化的方法。在现实世界里，人们对笔者称之为“世界对象模型”里的许多事物都有一个共同的理解。例如，当用“汽车”、“房子”和“树”等名词来称呼日常生活环境里的事物时，我们几乎可以百分之百地肯定对方知道我们说的是什么，而这是因为人们对这
7、些名词所代表的具体事物都有着同样的认识。于是，当对别人说“汽车停在了车库里”时，可以相当有把握地假设他们不会把这句话理解为“小鸟关在了壁橱里”。我们的“世界对象模型”不仅可以用来描述客观存在的事物，还可以用来描述各种抽象概念。例如，假设有个人向我问路，而我给出的答案是“左边第三栋房子”。这个答案有没有意义将取决于那个人能否理解“第三”和“左边”等抽象概念的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何帮助。在现实世界里，正是因为大家对抽象的世界模型有着基本的共识，人们才能用非常简单的话把比较复杂的含义表达出来并得到对方的理解。具体到这里的例子，我可以相
8、当有把握地断定，那位老兄以及其他人对“第三”和“左边”等抽象概念的理解和我对这些概念的理解是完全一样的。这个道理对网页也同样适用。JavaScript的早期版本向程序员提供了对Web文档的某些实际内容（主要是图像和表单）进行查询和操控的手段。因为“图像”和“表单”等名词是程序员都明白的概念，JavaScript语言也预先定义了“images”和“forms”等关键字，我们才能像下面这样在JavaScript脚本里引用“文档中的第三个图像”或“文档中名为details的表单”：现在的人们通常把这种试验性质的初级DOM称为“第0级DOM”（DOM Level 0）。在还未形成统一标准的初期阶段，“
9、第0级DOM”的常见用法包括对图像进行链接和显示以及在客户端进行某种形式的数据合法性验证。但从Netscape和微软公司各自推出的第四代浏览器产品开始，DOM受到了越来越多的开发人员和爱好者的关注。1.2浏览器之争Netscape Navigator 4（NN 4）浏览器发布于1997年6月，IE 4浏览器发布于同年的10月。这两种浏览器都对它们的早期版本进行了许多改进，使用得到极大扩展的DOM，可以通过JavaScript完成的功能大大增加，而网页设计人员也开始熟悉一个新的名词：DHTML。1.2.1DHTMLDHTML是“dynamic HTML”（动态HTML）的简称。严格地说，DHTM
10、L并不是一项单一的新技术，而是HTML、CSS和JavaScript这三种技术相结合的产物。DHTML背后的含义是：利用HTML把网页标记为各种元素；利用CSS设计各有关元素的排版样式并确定它们在窗口中的显示位置；利用JavaScript实时地操控和改变各有关样式。DHTML指的是上述三项技术的相互结合。利用DHTML，复杂的动画效果一下子变得非常容易实现。例如，可以先用HTML标记一个如下所示的页面元素：然后，可以用CSS为这个页面元素定义如下所示的位置样式：接下来，只需利用JavaScript改变myelement元素的left和top样式，就可以让它在页面上随意移动。不过，这种简单性只停
11、留在理论上因为NN 4和IE 4浏览器使用的是不同的且不兼容的DOM，所以要想实际获得这种效果还需要程序员做很多工作。换句话说，虽然浏览器制造商的目标是一样的，但他们在解决DOM问题时采用的办法却完全不同。1.2.2浏览器之间的冲突Netscape公司的DOM使用了其专有的元素，这些元素称为层（layer）。这些层都有唯一的ID，JavaScript代码需要像下面这样使用它们：而在微软公司的DOM中这个元素必须像下面这样使用：这两种DOM在细节方面的差异并不止于这一点。假设你想找出myelement元素的left位置并把它赋值给变量xpos，那么在Netscape Navigator 4浏览器
12、里必须这样做：而在IE 4浏览器中，你需要使用如下所示的语句才能完成同样的工作：这就导致了一种很可笑的局面：程序员在编写DOM脚本代码时必须知道它们将运行在哪种浏览器环境里。在实际工作中，许多脚本都不得不编写两次，一次为NN 4浏览器，另一次为IE 4浏览器。同时，为了确保能够正确地向不同的浏览器提供与之相应的脚本，程序员还必须编写一些代码去检测在客户端运行的浏览器到底是哪一种。DHTML打开了一扇通往新世界的大门，但进入这扇大门的人们却发现这条路并不好走。因此，没多久，DHTML就从一个大热门变成了一个人们不愿提起的名词，而对这种技术的评价也很快地变成了“宣传噱头”和“难以实现”。1.3制定
13、标准就在浏览器的制造商们为了压倒竞争对手而以DOM为武器展开一场营销大战的同时，W3C不事声张地推出了一个标准化的DOM。令人欣慰的是，Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并于1998年10月完成了“第1级DOM”（DOM Level 1）。回到刚才的例子，我们一起看看新的标准化DOM是如何解决同样的问题的。我们已经用标签定义了一个ID为myelement的页面元素，现在需要找出它的left位置并把这个值保存到变量xpos中。下面是需要用到的语法：乍看起来，这与刚才那两种非标准化的专有DOM相比并没有明显的改进。但事实上，标准化的DOM有
14、着非常远大的抱负。浏览器制造商们感兴趣的只不过是一些通过JavaScript操控网页的具体办法，但W3C推出的标准化DOM却可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。1.3.1浏览器以外的考虑DOM是一种API（应用编程接口）。简单地说，API就是一组已经得到有关各方共同认可的基本约定。在现实世界中，相当于API的例子包括（但不限于）：摩尔斯码国际时区化学元素周期表以上这些都是不同学科领域中的标准，它们使得人们能够更方便地进行交流与合作。如果没有这样的标准，事情往往会演变成为一场灾难。别忘了，英制度量衡与公制度量衡之间的差异至少导致过一次火星探测任务的失败
15、。在软件编程领域中，虽然存在着多种不同的语言，但很多任务却是相同或相似的。这也正是人们需要API的原因。一旦掌握了某个标准，就可以把它应用在许多不同的环境中。虽然有关的语法会因为使用的程序设计语言而有所变化，但这些约定却总是保持不变的。因此，在学完这本关于如何通过JavaScript使用DOM的书之后，你们获得的关于DOM的新知识对你们今后的工作例如，需要使用诸如PHP或Python之类的程序设计语言去解析一份XML文档的时候，也会有很大的帮助。W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。”W3C推出的标
16、准化DOM，在独立性和适用范围等诸多方面，都远远超出了各自为战的浏览器制造商们推出的各种专有DOM。1.3.2浏览器之争的结局我们知道，浏览器市场份额大战的赢家是微软公司，但具有讽刺意味的是，专有的DOM和HTML标记对这个最终结果并无影响。IE浏览器之所以能击败其他对手，其主要原因不过是所有运行着Windows操作系统的个人电脑都预装了它而已。受浏览器之争影响最重的人群是那些网站和网页设计人员。需要同时支持多种浏览器的软件开发工作，曾经是程序员们的噩梦。除了刚才提到的那些在JavaScript实现方面的差异之外，Netscape Navigator和IE这两种浏览器在对CSS的支持方面也有许多非常不同的地方。有不少程序员都把编
