JavaScript系列之(2)JavaScript 导航树

大多数 Web 开发人员都是以一种分层方式组织内容，其中一些页面显示一般内容的分类，然后这些分类能够链接到更具体的页面。例如一个公司的 Web 站点的主页面可能有一个顶级链接，分别链接到公司信息、产品、服务和技术支持。点击公司的产品链接然将会打开一个页面，该页面包含链接到公司不同产品页面的链接。分层结构能够让用户看清所有的选项，并选择查看具体的信息。

树是一种表现分层结构的很好的方式，可以用来跟踪分层结构，并理解它们的表现方式。树的分支对应信息分类，树的叶子对应特写类别内的信息的具体实例。为了使用更少的页面显示层次信息，一些树就被设计出来用于展开和折叠。在上面的例子中，可以点击加号（+）来展开树的分支，点击减号（-）折叠展开的分支。树的叶子以一个星号（*）标记。如果点击一个叶子的文本，就会弹出一个独立的窗口显示一个新页面。

在今天的专栏里，我将会说明树的工作方式以及如何实现树。很多读者都提出要求一个能够工作在 Internet Explorer 4.0 及以后版本、Navigator 4.0 以及新的 Navigator 6.0 的纯 JavaScript Tree 对象。这个 Tree 对象将能够在这些浏览器中工作。

Tree 对象如何工作

文件 tree.js 定义 Tree 对象。Tree 对象使用 Tree() 构造方法构造，其形式如下：

var treeRef = new Tree(”treeRef”,”t1”)

第一个参数是一个要引用到被创建的 Tree 对象的变量名。该变量由树的事件处理函数引用。注意变量名本身并没有被传递，实际传递的是包含变量名的一个字符串。第二个参数是 Tree 对象的一个唯一的 ID。其名字用来保存一个与树相关的 cookie。

Tree