hi_1991world

DHTML(动态对象模型)

动态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="mygif.gif">
</DIV>
<IMG id=image2 src="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对象children集合中的一个成员，而p对象则不是。

每一个元素除了拥有上面所说的集合外，文档（由document对象表示）本身还拥有一系列元素和非元素集合,其中最重要的一个集合就是all集合，它包含了在当前web页面上的所有元素，这个集合是脚本语言访问元素对象的最基本途径。有关使用元素对象集合的更多信息，请参阅“对元素和集合编写脚本”（Scripting with Elements and Collections）

· 什么是对象模型？（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="mygif.gif">

        </DIV>

        <IMG id=image2 src="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）

禁止事件：

所有的事件都将向它们的父级元素冒泡，而且除非冒泡过程中事件被禁止了，否则事件将会被递归地沿着层次结构的路径最后上浮到文档对象（document object）。要禁止一个事件，你必须在事件句柄中把window.event.cancelBubble属性的值设为“true”。注意一点，除非事件被禁止了，否则，在沿着层次结构冒泡的过程中，它将会被所有注册了这个事件句柄的父级元素处理，即使它已经在子级元素中被处理过了。

禁止事件冒泡与禁止事件的默认行为是不同的。一些事件（例如：一个锚点上的onclick）具有默认行为。当一个锚点被单击时，它默认的行为是把当前窗口导航到其src属性所指定的URL。在事件句柄中返回“false”，或者设置window.event.returnValue属性为“false”，可以禁止事件的默认行为，但不能禁止事件的向上冒泡。要禁止向上冒泡，只有把window.event.returnValue属性设为“true”，相对应地，禁止事件冒泡的设置也并会禁止事件的默认行为。

最后一个例子是演示如何利用事件冒泡将一个共同的效果应用到一组元素上的。若你想把其中一个元素排除在这个效果之外，只要简单地把下面这行代码，从：

<SPAN class=Item>Ham</SPAN>

修改为：

<SPAN class=Item onmouseover="window.event.cancelBubble = true;"

    onmouseout="window.event.cancelBubble = true;">Ham</SPAN>

就可以了。

（例子的超级链接：

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_03.htm ）

进一步的思考：

在有些情况下，你可以让一个onmouseover事件只注册在一个对象上，考虑下面情况：

<DIV id=MyDiv>

<IMG id=MyImg>

</DIV>

假如你在img对象上移动鼠标指针，事件将会以下面的顺序激发：

MyDiv:: onmouseover

MyDiv:: onmouseout

MyImg:: onmouseover

把你的鼠标指针从img对象上移开将会再次激发MyDiv::onmouseover事件。

有些时候，网页制作者可能会想去探测鼠标指针何时移出一个div对象以实现某种

特别效果。这时，仅仅简单地设置onmouseout事件就并不足够了。为了使这种情况更容易解决，IE4.0标准为onmouseover和onmouseout事件增加了指示源对象（formElement）和目标对象(toElement)的属性，你可以综合使用这些属性和容器的方法来辨别鼠标指针何时移出了一个区域。

下面的例子演示了如何使用这些属性和方法：