DHTML对象模型（About the DHTML Object Model）(一)
日期：2011-09-13 浏览次数：20970 次
【注：最近在学习asp.net，觉得javascript的很多知识在asp.net中仍很有用，又觉得javascript的实质是利用脚本对DHTML对象编程，但网上关于DHTML层次结构的中文资料又比较少，所以看了msdn上的这个资料后就翻译了出来，希望大家多多指教。】
DHTML对象模型（About the DHTML Object Model）
动态HTML(DHTML)文档对象模型（Document Object Model :DOM）使网页制作者可以直接地以可编程的方式访问Web文档上每个独立的部分，而不论被访问的是元素还是容器。这种访问方式包括了事件模型，事件模型令浏览器可对用户输入做出反应，通过执行脚本，无须从服务器下载一个新的页面就可以根据用户输入显示新的内容。动态HTML文档对象模型(DHTML DOM)以一种便捷的方式为广大普通网页制作者提供了丰富的网页交互性。
· 什么是对象模型？（What Is the Object Model?）
· 使用脚本访问元素（Accessing Elements with Script）
· 事件：冒泡，禁止与处理（Events: Bubbling, Canceling, and Handling）
· 处理鼠标效果 （Handling Rollover Effects）
· 禁止事件 （Canceling Events）
· 进一步的思考 （Special Considerations）
· 相关主题（Related Topics）
什么是对象模型？
对象模型就是令DHTML可编程的结构，它不需要网页制作者学习任何新的HTML标记，它也不涉及任何新的网页制作技术。事实上，事实上这个对象模型是建基于网页制作者过去已经习惯的网页制作技术的。回忆一下你有否尝试过使用脚本来为表单（form）元素设置值，又或者使用脚本来为一个微软IE3.0浏览器中的链接添加一个mouseover事件；如果有，那么你已经在通过脚本使用DHTML对象模型的一个有限形式来访问你的HTML网页了。
现在这个DHTML对象模型的唯一不同是：现在，任何一个HTML元素都是可编程的。这意味着页面上的任何一个HTML元素都可以拥有相应的脚本，可以使用这些脚本代码来使页面与用户的动作发生交互，动态地改变页面内容。这种事件模型使文档(document)可以在用户对页面做出某种动作（例如，当用户把鼠标指针移动到一个特定的元素上，或者按下了键盘按键，又或者在表单中输入了新的信息）后，做出相应的反应。每一个事件都可以被链接到一段脚本以告诉浏览器如何在这次交互中变更内容，而无需返回服务器去获取一个新的文件。这带来的好处是，网页制作者可以用更少的页面制作出富交互性的代码。而网页的浏览者因为无需等待新的页面从网站下载到客户端，无论从浏览速度到浏览效果都得到了全面的提升。
使用脚本访问元素
在对象模型中每一个HTML元素都是一个可编写脚本的对象，拥有自己的一组属性(properties)、方法（Methods）和事件（Events）。要为元素对象编写脚本，网页制作者首先必须知道如何获取一个对象。
DHTML的焦点是元素的集合（collection），以及这些元素如何被组织进一个层次结构中。这些元素集合中最重要的就是all集合(all collection)和children集合(children collection)。一个DHTML文档就是一组结构化地排列的元素在下面的例子里每个元素都有其各自的影响范围，这个范围取决于这个标记在文档中出现的位置。
<HTML>
<BODY>
<DIV>
<P>Some text in a
<B>paragraph</B>
</P>
<IMG id=image1 src=http://www.163design.net/a/j/"mygif.gif">
</DIV>
<IMG id=image2 src=http://www.163design.net/a/j/"mygif.gif">
</BODY>
</HTML>
在上面的例子中div对象包含了一个p对象和一个叫image1的img对象，同时也是这两个对象的父级（parent），相对地p对象和img对象是div对象的孩子(children)。而叫image2的img对象，则是body对象的孩子。
每一个元素对象都有一个叫做all的对象集合和一个叫children的对象集合，all的对象集包含了在这个元素层次结构下的所有对象，而children对象集合则包含了当前元素的所有直接子代元素。在上面的例子中，b在div对象的all集合中，但不会出现在div对象的children集合中；同样地，div对象是body对象all集合中的一个成员，而p对象则不是。
每一个元素除了拥有上面所说的集合外，文档（由document对象表示）本身还拥有一系列元素和非元素集合,其中最重要的一个集合就是all集合，它包含了在当前web页面上的所有元素，这个集合是脚本语言访问元素对象的最基本途径。有关使用元素对象集合的更多信息，请参阅“对元素和集合编写脚本”（Scripting with Elements and Collections）
DHTML对象模型（About the DHTML Object Model）
动态HTML(DHTML)文档对象模型（Document Object Model :DOM）使网页制作者可以直接地以可编程的方式访问Web文档上每个独立的部分，而不论被访问的是元素还是容器。这种访问方式包括了事件模型，事件模型令浏览器可对用户输入做出反应，通过执行脚本，无须从服务器下载一个新的页面就可以根据用户输入显示新的内容。动态HTML文档对象模型(DHTML DOM)以一种便捷的方式为广大普通网页制作者提供了丰富的网页交互性。
· 什么是对象模型？（What Is the Object Model?）
· 使用脚本访问元素（Accessing Elements with Script）
· 事件：冒泡，禁止与处理（Events: Bubbling, Canceling, and Handling）
· 处理鼠标效果 （Handling Rollover Effects）
· 禁止事件 （Canceling Events）
· 进一步的思考 （Special Considerations）
· 相关主题（Related Topics）
什么是对象模型？
对象模型就是令DHTML可编程的结构，它不需要网页制作者学习任何新的HTML标记，它也不涉及任何新的网页制作技术。事实上，事实上这个对象模型是建基于网页制作者过去已经习惯的网页制作技术的。回忆一下你有否尝试过使用脚本来为表单（form）元素设置值，又或者使用脚本来为一个微软IE3.0浏览器中的链接添加一个mouseover事件；如果有，那么你已经在通过脚本使用DHTML对象模型的一个有限形式来访问你的HTML网页了。
现在这个DHTML对象模型的唯一不同是：现在，任何一个HTML元素都是可编程的。这意味着页面上的任何一个HTML元素都可以拥有相应的脚本，可以使用这些脚本代码来使页面与用户的动作发生交互，动态地改变页面内容。这种事件模型使文档(document)可以在用户对页面做出某种动作（例如，当用户把鼠标指针移动到一个特定的元素上，或者按下了键盘按键，又或者在表单中输入了新的信息）后，做出相应的反应。每一个事件都可以被链接到一段脚本以告诉浏览器如何在这次交互中变更内容，而无需返回服务器去获取一个新的文件。这带来的好处是，网页制作者可以用更少的页面制作出富交互性的代码。而网页的浏览者因为无需等待新的页面从网站下载到客户端，无论从浏览速度到浏览效果都得到了全面的提升。
使用脚本访问元素
在对象模型中每一个HTML元素都是一个可编写脚本的对象，拥有自己的一组属性(properties)、方法（Methods）和事件（Events）。要为元素对象编写脚本，网页制作者首先必须知道如何获取一个对象。
DHTML的焦点是元素的集合（collection），以及这些元素如何被组织进一个层次结构中。这些元素集合中最重要的就是all集合(all collection)和children集合(children collection)。一个DHTML文档就是一组结构化地排列的元素在下面的例子里每个元素都有其各自的影响范围，这个范围取决于这个标记在文档中出现的位置。
<HTML>
<BODY>
<DIV>
<P>Some text in a
<B>paragraph</B>
</P>
<IMG id=image1 src=http://www.163design.net/a/j/"mygif.gif">
</DIV>
<IMG id=image2 src=http://www.163design.net/a/j/"mygif.gif">
</BODY>
</HTML>
在上面的例子中div对象包含了一个p对象和一个叫image1的img对象，同时也是这两个对象的父级（parent），相对地p对象和img对象是div对象的孩子(children)。而叫image2的img对象，则是body对象的孩子。
每一个元素对象都有一个叫做all的对象集合和一个叫children的对象集合，all的对象集包含了在这个元素层次结构下的所有对象，而children对象集合则包含了当前元素的所有直接子代元素。在上面的例子中，b在div对象的all集合中，但不会出现在div对象的children集合中；同样地，div对象是body对象all集合中的一个成员，而p对象则不是。
每一个元素除了拥有上面所说的集合外，文档（由document对象表示）本身还拥有一系列元素和非元素集合,其中最重要的一个集合就是all集合，它包含了在当前web页面上的所有元素，这个集合是脚本语言访问元素对象的最基本途径。有关使用元素对象集合的更多信息，请参阅“对元素和集合编写脚本”（Scripting with Elements and Collections）
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
