目录视图
摘要视图
订阅
分类：
版权声明：本文为博主原创文章，未经博主允许不得转载。
本章内容
q JavaScript的起源
q 浏览器之争
q DOM的演变史
<script type="text/javascript"><!--
google_ad_client = "pub-3269163127493396";
google_ad_width = 120;
google_ad_height = 90;
google_ad_format = "120x90_0ads_al";
//2007-05-08: IT
google_ad_channel = "0064192373";
google_color_border = "6699CC";
google_color_bg = "003366";
google_color_link = "FFFFFF";
google_color_text = "AECCEB";
google_color_url = "AECCEB";
//-->
</script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
对网页设计人员来说，这是一个充满着挑战和机遇的时代。近几年来，网页设计工作已经从一种混乱无序和即兴发挥的状态，逐渐发展为一种有着成熟的设计原则可供遵循的流水线作业。有越来越多的网页设计人员开始采用一种标准化的思路来建立网站，而实现这一思路和方法的具体技术则称为“Web标准”。
当网页设计人员谈论起与Web标准有关的话题时，XHTML(可扩展的超文本标记语言)和CSS(层叠样式表)通常占据着核心地位。不过，由W3C(万维网联盟)批准并由所有与标准相兼容的Web浏览器支持的第三方技术称为DOM(文档对象模型)。我们可以利用DOM去改善文档的可交互性，就像我们可以利用CSS给文档添加各种样式一样。
JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScript出现之后，网页的内容不再局限于枯燥的文本，它们的可交互性得到了显著的改善。JavaScript的第一个版本，即JavaScript1.0版本，出现在1995年推出的Netscape Navigator2浏览器中。
在JavaScript1.0发布时，Netscape Natscape主宰着浏览器市场，微软的IE浏览器则扮演着追赶者的角色。微软在推出IE 3的时候发布了自己的VBScript语言并以JScript为名发布了JavaScript的一个版本，以此很快跟上了Netscape的步伐。
面对微软公司的竞争，Netscape和Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript语言进行了标准化。其结果就是ECMAScript语言，这使得同一种语言又多了一个名字。虽说ECMAScript这个名字没有流行开来，但人们现在谈论的JavaScript实际上就是ECMAScript。
到了1996年，JavaScript，ECMAScript，JScript——随便啦，已经站稳了脚跟。Netscape和微软公司在它们各自的第3版浏览器中都不同程度地提供了对JavaScript1.1语言的支持。
这里必须指出的是，JavaScript与Sun公司开发的Java程序语言没有任何联系。人们最初给JavaScript起的名字是LiveScript，后来选择JavaScript作为其正式名称的原因，大概是想让它听起来有系出名门的感觉，但令人遗憾的是，这一选择反而更容易让人们把这两种语言混为一谈，而这种混淆又因为各种Web浏览器确实具备这样或那样的Java客户端支持功能的事实被进一步放大和加剧。事实上，虽说Java在理论上几乎可以部署在任何环境中，但JavaScript却只局限于Web浏览器。
JavaScript是一种脚本语言，通常只能通过Web浏览器去完成某种操作而不是像普通意义上的程序那样可以独立运行。因为需要由Web浏览器进行解释和执行，所以JavaScript脚本不像Java和C++等编译型程序设计语言那样用途广泛。不过，这种相对的简单性也正是JavaScript的长处：因为比较容易学习和掌握，所以JavaScript很受那些本身不是程序员，但希望能够通过简单的剪贴操作把脚本嵌入他们的现有网页中的普通用户们的欢迎。
JavaScript还向程序员提供了一种操控Web浏览器的手段。例如，JavaScript语言可以用来调整Web浏览器窗口的高度，宽度和屏显位置等属性。以这种办法给出Web浏览器本身的属性可以看做是BOM(浏览器对象模型)。JavaScript的早期版本还提供了一种初级的DOM(文档对象模型)。
什么是DOM
简单地说，DOM是一套对文档的内容进行抽象和概念化的方法。
在现实世界里，人们对笔者称之为“世界对象模型”里的许多事物都有一个共同的理解。例如，当用“汽车”，“房子”和“树”等名词来称呼日常生活环境里的事物时，我们几乎可以百分之百地肯定对方知道我们说的是什么，而这是因为人们对这些名词所代表的具体事物都有着同样的认识。于是，当对别人说“汽车停在了车库里”时，可以相当有把握地假设他们不会把这句话理解为“小鸟关在了壁橱里”。
我们的“世界对象模型”不仅可以用来描述客观存在的事物，还可以用来描述各种抽象概念。
例如，假设有个人向我问路，而我给出的答案是“左边第三栋房子”。这个答案有没有意义将取决于那个人能否理解“第三”和“左边”等抽象概念的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会任何帮助。在现实世界里，正是因为大家对抽象的世界模型有着基本的共识，人们才能用非常简单的话把比较复杂的含义表达出来并得到对方的理解。具体到这里的例子，我们可以相当有把握地断定，那位老兄以及其他人对“第三”和“左边”等抽象概念的理解和我对这些概念的理解是完全一样的。
这个道理对网页也同样适用。JavaScript的早期版本向程序员提供了对Web文档的某些实际内容(主要是图像和表单)进行查询和操控的手段。因为“图像”和“表单”等名词是程序员都明白的概念，JavaScript语言也预先定义了“images”和“forms”等关键字，我们才能像下面这样在JavaScript脚本里引用“文档中的第三个图像”或“文档中名为details的表单”：
document.images[2]
document.forms[‘details’]
现在的人们通常把这种试验性质的初级DOM称为“第0级DOM”(DOM Level 0)。在还未形成统一标准的初期阶段，“第0级DOM”的常见用法包括对图像进行链接和显示以及在客户端进行某种形式的数据合法性验证。但从Netscape和微软公司各自推出的第四代浏览器产品开始，DOM受到了越来越多的开发人员和爱好者的关注。
<script type="text/javascript"><!--
google_ad_client = "pub-3269163127493396";
google_ad_width = 120;
google_ad_height = 90;
google_ad_format = "120x90_0ads_al";
//2007-05-08: IT
google_ad_channel = "0064192373";
google_color_border = "6699CC";
google_color_bg = "003366";
google_color_link = "FFFFFF";
google_color_text = "AECCEB";
google_color_url = "AECCEB";
//-->
</script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
DHTML背后的含义是：
q 利用HTML把网页标记为各种元素;
q 利用CSS设计各有关元素的排版样式并确定它们在窗口中的显示位置;
q 利用JavaScript实时地操控和改变各有关样式。
DHTML指的是上述三项技术的相互结合。利用DHTML，复杂的动画效果一下子变得非常容易实现。例如，可以先用HTML标记一个如下所示的页面元素：
<div id=”myelement”>This is my element</div>
然后，可以用CSS为这个页面元素定义如下所示的位置样式：
#myelement{
position:absolute;
left:500px;
top:100px;
}
接下来，只需要利用JavaScript改变myelement元素的left和top样式，就可以让它在页面上随意移动。
不过，这种简单性只停留在理论上——因为NN4和IE4浏览器使用的是不同的且不兼容的DOM，所以要想实际获得这种效果还需要程序员做很多工作。换句话说，虽然浏览器制造商的目标是一样的，但他们解决DOM问题时采用的办法却完全不同。
Netscape公司的DOM使用了其专有的元素，这些元素称为层(layer)。这些层都有唯一的ID，JavaScript代码需要像下面这样使用它们：
document.layers[‘myelement’]
而在微软公司的DOM中这个元素必须像下面这样使用：
document.all[‘myelement’]
这就导致了一种很可笑的局面：程序员在编写DOM脚本代码时必须知道它们将运行在哪种浏览器环境里。在实际工作中，许多脚本都不得不编写两次。同时，为了确保能够正确地向不同的浏览器提供与之相应的脚本，程序员还必须编写一些代码去检测在客户端运行的浏览器到底是哪一种。
DHTML打开了一扇通往新世界的大门，但进入这扇大门的人们地发现这条路并不好走。
令人欣慰的是，Netscape，微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并于1998年10月完成了“第1级DOM”(DOM Level 1)
浏览器制造商们感兴趣的只不过是一些通过JavaScript操控网页的具体办法，但W3C推出的标准化DOM却可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。
DOM是一种API(应用编程接口)。简单地说，API就是一组已经得到有关各方共同认可的基本约定。在现实世界中，相当于API的例子包括(但不限于)
q 摩尔斯码
q 国际时区
q 化学元素周期表
以上这些都是不同学科领域中的标准，它们使得人们能够更方便地进行交流与合作。如果没有这样的标准，事情往往会演变成为了一场灾难。别忘了，英制度量衡与公制度量衡之间的差异至少导致过一次火星探测任务的失败。
在软件编程领域中，虽然存在着多种不同的语言，但很多任务却是相同或相似的。这也正是人们需要API的原因。一旦掌握了某个标准，就可以把它应用在许多不同的环境中。虽然有关的语法会因为使用的程序设计语言而有所变化，但这些约定却总是保持不变的。
W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容，结构和样式进行访问和修改。”
W3C推出的标准化DOM，在独立性和适用范围等诸多方面，都远远超出了各自为战的浏览器制造商们推出的各种专有DOM。
我们知道，浏览器市场份额大战的赢家是微软公司，但具有讽刺意味的是，专有的DOM和HTML标记对这个最终结果并无影响。IE浏览器之所以能击败其他对手，其主要原因不过是所有运行着Windows操作系统的个人电脑都预装了它而已。
为了打破浏览器制造商们筑起的专利壁垒，一群志同道合的程序员建立了名为Web标准计划(简称WaSP，http://webstandards.org/)的小组。WaSP小组采取的第一个行动就是，鼓励浏览器制造商们接受W3C制定和推荐的各项标准——也就是在浏览器制造商后来推出的下一代浏览器产品对Web标准的支持得到了极大的改善。
IE5内建了对W3C制定的标准化DOM的支持，但同时继续支持其专有的Microsoft DOM。Netscape发布NN 6,使用一个与以前完全不同的呈现引擎，新引擎对CSS提供了更多更好的支持。NN 6也支持标准化的DOM，但不再向后兼容早期的Netscape DOM。
Apple公司在2003年发布了Web浏览器Safari，Firefox,Mozilla和Camino等浏览器对DOM的支持也非常完善，它们采用了与Netscape6和7完全一样的开源呈现引擎。Opera和Konquerer浏览器也提供了对DOM的良好支持。
现在，程序员在编写一次代码就几乎可以把它们应用在所有的场合了。只要遵守DOM标准，程序员就可以相当有把握地确信，自己编写的脚本几乎在所有的环境下都可以正常工作。
DHTML是HTML/XHTML，CSS和JavaScript相结合的产物，但把这些东西真正凝聚在一起的是DOM。如果真的需要有个词汇来描述这一过程的话，我们就应该使用一个更精确的词汇。用DHTML来称呼与浏览器有关的编程工作并不是不可以，但用它来描述基于有关标准的代码编写工作就不那么恰当了。在探讨如何使用W3C DOM来处理文档和样式表时，我们认为“DOM脚本程序设计(DOM Scripting)”是一种更精确的说法。
DHTML只适用于Web文档，“DOM脚本程序设计”则涵盖了使用任何一种支持DOM API的程序设计语言去处理任何一种标记文档的所有情况。具体到Web文档，JavaScript语言的特点使它成为了DOM脚本程序设计的最佳选择。
<script type="text/javascript"><!--
google_ad_client = "pub-3269163127493396";
google_ad_width = 120;
google_ad_height = 90;
google_ad_format = "120x90_0ads_al";
//2007-05-08: IT
google_ad_channel = "0064192373";
google_color_border = "6699CC";
google_color_bg = "003366";
google_color_link = "FFFFFF";
google_color_text = "AECCEB";
google_color_url = "AECCEB";
//-->
</script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
在正式介绍DOM脚本程序设计技巧之前，我们将在下一章先向大家简要地介绍一下JavaScript的语法。
您好：
当您在阅读和使用我所提供的各种内容的时候，我非常感谢，您的阅读已是对我最大的支持。
我更希望您能给予我更多的支持。
1.希望您帮助我宣传我的博客，让更多的人知道它，从中获益(别忘记了提醒他们帮我点点广告，嘿嘿)。
2.希望您能多提出宝贵意见，包括我所提供的内容中的错误，建设性的意见，更希望获得哪些方面的帮助，您的经验之谈等等。
3.更希望能得到您经济上的支持。
我博客上面的内容均属于个人的经验，所有的内容均为开源内容，允许您用于任何非商业用途，并不以付费为前提，如果您觉得在阅读和使用我所提供的各种内容的过程中，您得到了帮助，并能在经济上给予我支持，我将感激不尽。
您可以通过点击我网站上的广告表示对我的支持。
您可以通过银行转帐付款给我：
招商银行一卡通：
卡号：6225888712586894
姓名：牟勇
您也可以通过汇款的方式：
通讯地址：云南省昆明市女子(28)中学人民中路如意巷1号
收信人：陈谦转牟勇收
邮编：650021
无论您给予我怎么样的支持，我都衷心的再次感谢。
欢迎光临我的博客，欢迎宣传我的博客
http://blog.csdn.net/mouyong
http://blog.sina.com.cn/mouyong
EMail:mouyong@yeah.net
QQ:11167603
MSN:mouyong1973@hotmail.com
- 顶
- 0
- 踩
- 0
查看评论
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
