● 动态HTML对象模型 - 荔园在线 | 深圳大学学生论坛,荔园晨风BBS,深大在线网站

荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀

发信人: Jobs (温少), 信区: Visual
标  题: 动态HTML对象模型
发信站: BBS 荔园晨风站 (Mon Mar  6 12:03:32 2000), 转信

动态HTML对象模型

Nancy Winnick Cluts
Microsoft Corporation
1997年7月

摘要

动态HTML是一种用来制作并显示交互式网页的技术。它包括动态类型、动态内容
、二维布局、数据捆绑和多媒体效果。动态HTML对象模型使上述特征都可编程。
使用动态HTML，可以在网页上充分发挥Microsoft Windows 应用程序的能力。

综合上述特性，客户和服务器的性能都可以得到进一步的改善。由于在客户端可
以动态的刷新元素特性，可以更少的返回访问服务器，可更方便的编辑网页，实
现真正意义上的交互。
本文将介绍动态HTML对象模型的基本知识。

对象模型并不复杂

作者第一次编写动态HTML时，有人建议使用Internet Explorer 4.0对象模型，当
时作者对什么是动态HTML一无所知，想当然的认为它非常复杂、繁琐，做为一个
严肃的程序开发者，作者决定选择其它更紧急的程序去编。遗憾的是，作者的犹
豫并没有使困难自动消失，事后结果表明，动态HTML远非作者想像的那么困难。
希望本文能够以一种使读者感到轻松的方式，将动态HTML介绍给大家。

文章中作者将介绍使用Internet Explorer 4.0时需要掌握的不同特性。作者还将
通过程序、示例说明某些概念。

什么是动态HTML对象模型

动态HTML对象模型不定义新的标识和属性集，它只是将人们所熟知的标识、属性
以及CSS属性变得可以编程。原有的Java Script对象模型提供了访问网页上小元
素集的能力，但是只有一小部分属性是可以修改的，而且其中只有一小部分事件
可以激活。动态HTML可以访问所有HTML元素而且可以修改所有的属性。此外，每
一对象可以被访问的事件集和Java Script对象模型相比更加完整。

采用事件冒泡法，动态HTML对象模型使编程变得更加简单。所谓事件冒泡法，指
的是如下过程，对象可以自己处理事件，也可以将事件"冒泡"给它的父对象。这
使得程序开发人员可以用较少的代码处理较复杂的事件。类事件可以由父对象处
理，子对象中可以不必重复处理该事件，或使用缺省操作。

需要说明的是，动态HTML对象模型是由标准语言和示例组成的。也就是说，网页
通过脚本、控件或Java小程序控制。动态HTML对象模型使开发者可以在网页中加
入动态HTML功能，而这种网页在其它不支持该功能的浏览器中也能正常显示。本
文所描述的对象模型，已提交给国际互联网联盟（W3C）。

元素模型

动态HTML提供一种元素模型。也就是说，网页上的每个元素都可访问的，而且元
素的各个属性、方式和事件都是可操作的。人们可以处理网页上HTML标识的各种
事件，比如说按键点击、鼠标覆盖。一旦捕获到某一事件，就可以执行相应的脚
本（Visual Basic Scripting [VBScript],JavaScript,等）完成对该事件的响应
。例如，某一标识的鼠标覆盖事件可做如下处理，当用户的鼠标点在对象上时，
将字体改为大字体，当用户点击时，动态改变对象的文本，使用动态HTML对象模
型，复杂的工作可以变得简单。在下面的例子中，作者使用复合类创建了一个全
局模板。对于鼠标覆盖事件，类名会自动变化。

<STYLE>
.redText {color:Red}
.blueText {color:Blue}
</STYLE>
<H1 onmouseover="this.className='redText'"
onmouseout="this.className='blueText'">
Make this text red
</H1>
这种方式有两个优点：第一，代码简单。第二，代码可以复用。

事件冒泡法

使用Internet Explorer 3.0可以处理按键点击事件，但如果要定义基于按键点击
的缺省行为，就必须在每一个对象的脚本中反复拷贝和粘贴相应代码，动态HTML
为HTML文本提供了一种存贮层次结构。使用Internet Explorer4.0，通过脚本可
以只在父对象中写一次代码来处理事件，这就是所谓的事件冒泡。使用HTML术语
，可以写出以下脚本：

用户点击图像

〈IMG〉标识接受事件

〈IMG〉标识不想处理该事件

〈IMG〉标识在〈A〉标识中，〈A〉标识接受点击事件

如果需要〈IMG〉标识处理该事件，可以使用以下代码结束冒泡
window.event.cancelbubble = true.

由于程序员对通用事件只需写一次代码，事件冒泡法使代码变得更加紧凑。具体
实例详见下一节（摘自Alien Head先生）。

二维布局

另一个功能上的改进是提供了内容的二维能力，一个对象可以放在另一个对象的"
项上"，在用户查看网页时，也可以任意地移动对象。也就是说，可以创建一个网
页，网页上的对象可以从上面或下面飞越其它对象。有兴趣的读者可参考
http://www.microsoft.com/GALLERY/FILES/HTML/,网址上的Microsoft Dynamic
HTML Gallery。在该网址上，Alien Head先生给出了此类功能的示例（要实现这
一功能，必须运行Internet Explorer4.0。在本文撰写期间（1997年7月），
Internet Explorer4.0正在进行平台测试，预查询更多有关Internet
Explorer4.0的信息，请参见Internet Explorer 网址
http://www.microsoft.com/ie/）该功能实质上是Netscape<LAYER>标识的超集，
以下代码是Alien Head先生编写的，用于在网页上移动条目。

<SCRIPT LANGUAGE="VBScript">

function document_onmousemove(button, shift, x,y)
dim newleft, newtop, srcElement
if (button = 1) then
set srcElement = window.event.srcElement
' if an image is selected and the mouse is down drag it.
if srcElement.tagname="IMG" then
' position alien
newleft=x-(srcElement.width/2)
if newleft<0 then newleft=0
srcElement.style.left= newleft
newtop=y-(srcElement.height/2)
if newtop<0 then newtop=0
srcElement.style.top= newtop
window.event.returnValue = false
window.event.cancelBubble = true
end if
end if
end function

function alienhead_onmousemove(button, shift, x, y)
' don't drag the alien head
if (button = 1) then
window.event.cancelBubble = true
end if
end function
</SCRIPT>

结论

本文已经概述了动态HTML对象模型的基本概念。文章并未列出动态HTML的全部特
性，有兴趣的读者请参阅：The Next Generation of User Interface Design
Using HTML。在这本白皮书中详细论述了动态HTML的各种功能及特性，还介绍了
Internet开发人员和内容提供商如何使用HTML的详细方法。

--

   好好学习，天天向上！！！！

※ 来源:·BBS 荔园晨风站 bbs.szu.edu.cn·[FROM: 192.168.11.111]

荔园在线首页友情链接：深圳大学深大招生荔园晨风BBS S-Term软件网络书店