控制 DOM，第 2 部分

文档选项 未显示需要 JavaScript 的文档选项

级别： 初级

Gary Cole (colegl@us.ibm.com), 软件工程师, IBM
William F. Phillips (billphil@us.ibm.com), 软件工程师, IBM

2001 年 6 月 15 日

乍一看，编写 weblet 有些可怕。DOM API看上去庞大而复杂，理解如何使 HTML 页面和 weblet相协调也很困难。在使用 DOM 的 3 部系列文章的第 2 部分，作者 GaryCole 与 William Phillips 通过深入讨论 DirectDOM 和weblet，使您进一步精通 DOM。在下文中，通过使用 DirectDOM开发工具套件创建 3 个示例应用程序，您将学会如何以 weblet交互式的思维来编写 HTML页面。请点击文章顶部或底部的 讨论，参与讨论论坛，与本文作者和其他读者分享您对本文的想法。

在该系列文章的 第 1 部分中，我们介绍了文档对象模块 (DOM) 并且展示了如何使用 weblet，即小应用程序的 DirectDOM 版本，来控制浏览器内容。如果您不熟悉 HTML、DOM、DirectDOM 或 weblet，请在阅读下文之前参阅第 1 部分。在第 2 部分中，我们花很大篇幅深入理解基于 weblet 的应用环境。我们使用 3 个示例应用程序 -- 拼图、字体选择器和边框选择器 -- 来演示一个简单的构建基于 weblet 的应用程序的 3 步过程。在我们开始有趣的课程之前，让我们先讨论一下 weblet 是如何在 HTML 文档中浏览找到特定元素的，并且是怎样影响这些页面的设计的。

weblet是如何工作的

在上个月的文章中，我们介绍了 DirectDOM 并讨论了 DirectDOM 引擎。DirectDOM 引擎负责激活 weblet 对象。weblet 一旦被激活，总是以 org.w3c.dom.html.HTMLDocument 这样的方式开头。文档的对象是包括页面中所有元素的节点树的顶层。通常，weblet 使用文档树中的某些元素集。对任何给定的应用程序，DOM 提供 3 种在 HTML 页面中查找元素的基本方法。weblet 采用下列的一种或多种技术来查找它使用的元素：

浏览树。
请察看 org.w3c.dom.Node 界面，您将了解到有许多种浏览树的方法。例如，调用 Node.getChildNodes() 将可以访问给定节点的子节点。循环调用 getChildNodes() 就能详细浏览整个树并找到文档中的任何元素。这些技术对某些应用程序很有用，但如果是查找某特定节点或一系列节点，就可能需要选择另一种方法。

使用标签名称。
假设需要搜索某页中的所有 BUTTON 元素以便在每个元素中加入 "click" 事件控制器。您可以浏览整个文档来搜索 BUTTON 元素，但这样做效率太低。一种更好的方法是使用 Document.getElementsByTagName() 方法，这样将会在一次简单调用后返回所有的 BUTTON 元素。若是需要查找包含很多按钮的页面中的一个特定按钮，那您还是不得不察看一系列的按钮。

使用元素 ID。
若需要查找某个可能在文档中任何位置的特定元素，最佳方法是在 HTML 中设定元素的 ID 属性。ID 能和任何 HTML 标签结合 -- paragraph、division、table 等。ID 对于简化 weblet 代码非常有用。例如，假设需要查找文档中的第 3 个按钮。在 weblet 中，您可按照以下方法来做：

NodeList buttons = document.getElementsByTagName( "BUTTON" );
HTMLParagraphElement button = (HTMLParagraphElement) buttons.item( 2 );

然而，一个更简便的方法是在第 3 个按钮的 <BUTTON> 标签中设置属性 ID="button3" ，具体见下：

<BUTTON ID="button3">

然后，在 weblet 中可使用下列代码查找按钮：

HTMLParagraphElement para = (HTMLParagraphElement)
document.getElementByID( "button3" );

weblet 经常将这些技术组合使用。例如，您可通过使用标签名称或 ID 编写 weblet 来定位某个特定元素或一系列元素，然后使用 Node.getParentNode() 、 Node.getNextSibling() 等来浏览其他附近的元素。

定位目标元素时使用的技术将对 weblet 和其存在的 HTML 页面之间的关系产生巨大的影响。在使用 weblet 的时候必须考虑到其灵活性。例如，如果希望按钮位于第 3 段，仅在第 2 个 checkbox 之后，那么在第 1 段后，对于文档的更改将破坏 weblet。使用标签名能使应用程序更稳固，使用元素 ID 可以使 weblte 更能容忍文档的修改并且潜在的的重复使用率更高。

回页首

拼图示例

我们使用的第 1 个应用程序是个包含在 DirectDOM 包中拼图示例的稍加简化的版本（请参阅 参考资料）。这是个由 1 到 15 个标有数字的滑片组成的智力游戏，就和您小时候可能玩过的类似。我们将详细讨论开发该示例应用程序的 3 个步骤。

第 1 步。创建 HTML 页面

这是最简单的部分，可能您已经做过好几遍了。现在，我们不必担心添加 weblet 标签甚至不必考虑 weblet。我们只要专注于 HTML 页面。

该拼图的 HTML 并没有什么神奇之处，只是个充满按钮的表格，如 清单 1所示。

您可能已经注意到在上述示例中有许多的重复，您可能会想，为什么不使用几行 weblet 代码来生成整个表格呢。那的确是一种可选方案。我们尽可能多地使用静态 HTML，我们发现这样做比编写一个 weblet 来得更简单。但这两种做法各有千秋；这更多是习惯的问题。

第 2 步。编辑页面

一旦获得了预期设想的 HTML，就可以添加对象标签和命名 weblet 将要用到的 HTML 元素。如上文所建议的，正确命名 HTML 页面中的元素是编写简单而高效的 weblet 的关键。 清单 2 展示了包含 ID 属性的拼图 HTML 页面

第 3 步。编写 weblet

现在我们已经准备好编写 weblet 了，可以利用第 2 步中创建的 HTML 页面和加入的元素名称。

拼图 weblet 遵从大多数交互 weblet 的模式。特别的是：

• 初始化页面。（此处为“打乱”滑片的次序）
• 创建事件处理器。（此处为滑片的 "click" 事件）
• 定位用户界面元素（使用 getElementsByTagName 方法）
• 为用户界面元素添加事件处理器（此处为滑片的按钮）

清单 3 显示完成的拼图 weblet。

示例的注解

由于在第 1 个示例中我们进行了一些简化，因此 weblet 并不跟踪拼图是否已完成。alphaWorks DirectDOM 包中的拼图示例包括该项功能，而且使用与此处相同的命名方案来实现。

拼图 weblet 分别使用上述 3 种方法来定位 HTML 元素。为了添加事件处理器，按钮使用 Document.getElementsByTagName() 来查找。 Document.getElementById() 的作用是查找拼图中的空单元格。在事件管理器中，我们使用 Node.getParentNode() 按住某一特定按钮来定位该单元格。

在大多数的交互应用程序中， handleEvent() 方法是真正起作用的。它使用 getEventTarget() 获得被点击的按钮。该按钮的父集是其当前占用的单元格。该按钮的位置是表格中单元格的 ID 属性（已在第 2 步中加入）。如果被点击的按钮邻近空的表格单元格，那么该按钮就从当前单元格移动到邻进的空单元格中。对于用户，这看上去就象把“滑片”移动到新位置一样。

更多概念注释

在类似的应用程序中，通常我们希望找到一种类似数组的能代表该拼图的数据结构，可能在其元素中有代表滑片数的数字。该拼图 weblet 有些不同，因为该 weblet 中没有代表拼图的数据结构。而其文档本身是拼图应用程序的主数据结构。DOM 树并不仅仅是浏览器的页面格式指令，而控制着拼图应用程序运行的必要数据。

这就是使用 DOM 编程的重大优势之一。在文档中了解和使用特定的数据段是如此的简单，以至于文档本身就可能是应用程序的主数据结构。

以下是值得重申的重要部分。weblet 运行在 DOM API 描述的树型数据结构上，来代替使用纯 HTML 文本。若 HTML 元素被分配了唯一的 ID 属性，文档内容也能作为映射数据结构来访问，在那儿元素及其属性可直接通过名称获得。这样文档本身成为有用且强大的数据结构。这也是为什么 weblet 创建过程第 2 步中的 HTML 命名是如此重要的原因。

回页首

字体选择器示例

和拼图示例一样，字体选择器示例也来自 DirectDOM 包。它接着将进一步演示当与合适的 HTML 结合时 weblet 是多么的简单。字体选择器示例的目的在于演示各种字体和颜色属性应用于一小段示例文本中的样子。在该示例中，应用程序使用层叠式样式单 (CSS) 来迅速改变文本的外观。我们仍将仔细研究一下示例的每一个步骤。

第 1 步。创建静态 HTML 页面

在这一示例中，我们创建一个包含控制选择字体属性的表格，如 清单 4所示。

第 2 步。添加对象标签和元素 ID

该示例中的 ID（如 清单 5 所示）的选用使得 weblet 的工作非常简单。ID 与 CSS 内联样式功能使用的相同，weblet 将用其改变示例文本的外观。同样的，HTML 页面中存储的数据也不仅仅是文本。DOM 将这些数据作为有用的数据结构提供给 weblet 程序员。

第 3 步。 编写 weblet，开发 HTML 和元素名称

字体选择器 weblet 遵从上述交互 weblet 的要点。weblet：

• 通过获取和保存示例文本的内联样式来初始化
• 在选择元素中创建 "click" 事件控制器
• 定位所有页面内的选择元素
• 为每个选择元素添加事件处理器

该 weblet 如 清单 6 中所示。

示例的注释

通常来说，事件处理器是代码的关键部分。它的工作是每当用户点击选择元素时设置示例的内联样式属性。为实现该功能，事件处理器需要样式属性的名称和值。由于我们在第 2 步中所做的命名，属性的名称即是选择器的 ID，而设置的值即是选择器元素本身的值。

在样式选择器 handleEvent() 方法中，Netscape 和 IE 在事件目标上的不一致是该 weblet 的一个让人讨厌的特征。当使用 DOM 的时候，浏览器之间的不一致将造成潜在的重大问题。虽然 DOM　的 API 指定的非常完善，但浏览器实现方式的不同有时会使得工作非常困难。这样，对事件目标类的简单检查就是足够（如果粗略的话）了。

回页首

边框选择器示例

最后的示例是个边框选择器应用程序。边框选择器除了是处理边框而不是字体以外，其余与字体选择器类似。为了加快速度，我们将合并第 1 步和第 2 步，并且直接进入最终 HTML 和 weblet 的讨论。

清单 7 显示了添加了 ID 属性的静态 HTML 页面

第 3 步。编写 weblet

在本示例中，大部分工作已在 HTML 页面中完成。该 weblet 很普通，在字体选择器示例中使用的 weblet 可以不加修改地运用在本示例中。实际上，可通过重写 HTML 页面来编写出一系列类似的应用程序。

回页首

下一步是什么

由于本文中的示例可能非常简单，您可在学习使用 weblet 的过程中不断使用我们讨论的 3 步过程。请自行练习示例，然后扩展到创建类似的简单应用程序。您将很快发现自己能利用本文概述的简单技术来创建强大的 weblet 应用程序。

在本系列文章的最后部分，我们要让位于 IBM DirectDOM 小组的另一位成员 Paul Everett。Paul 将讲述一个基于 weblet 应用程序的重要方面：weblet 安全性。Paul 将特别讨论 weblet 安全性如何与小应用程序安全性相比较，并提高一些技巧来最大程度提高您基于 weblet 的应用程序的安全性。同时，请告诉我们您对本系列文章的看法。我们希望听到你们的反馈！

参考资料

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文.
  
  
• 请从 IBM alphaWorks 上下载 DirectDOM 开发工具包。
  
  
  
• 请参阅本系列文章的 第 1 部分，了解有关 DOM、DirectDOM 和 weblet 的更多信息。
  
  
  
• 了解更多关于 W3C，这一负责 DOM 的组织。
  
  
  
• 与流言相反的是，Java 客户端的开发根本没有消亡。如想了解不同观点，请参阅 Joseph Sinclair 的 “ 再谈客户端的 Java 技术”（developerWorks，2001 年 3 月）。
  
  
  
• 移动 DOM 节点时，请查阅“ 如何避免 Wrong document 异常 ”（developerWorks，2001 年 3 月）。
  
  
  
• 若您正在使用 WebSphere 开发企业应用，请查阅有关使用 DOM 将 XML 文档整合到应用程序中的 快速参考。
  

作者简介

		Gary Cole 和 William Phillips 在纽约的 Endicott 为 IBM 工作，主要从事类似 DirectDOM 等的非常前沿的项目。

		William F. Phillips has co-authored this article

对本文的评价

太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 建议？

回页首