layer（层）是javascript1.2版中引进的新对象。navigator4.0及以后版本支持该属性，但只有navigator支持layer对象。layer提供了在单个窗口内控制多个文档的功能。想其他对象一样，layer对象是document对象的子对象，但它有自己的属性，可以通过设置这些属性来控制层。在对层操作之前，必须首先能够访问层的属性。与窗口类似，也有layers数组，在这个数组中包含一个指定文档所包含的所有层。例如，想把一个文档的第二个层的visibility属性设为hide，可以用下面的语句：layer[1].visibility=hide; layer数组同样允许用层的名字来访问layer对象。如需要访问名称为tsinge的一个层，而又不想通过索引号来访问，就可以通过层的名称来访问，例如： layers.tsinge.bgcolor 或 layers.["tsinge"].bgcolor 在html文档里，<layer>和</layer>标签之间的所有代码都会变为一个层。这个层包括自己的文档和属性，根据是否给定了这个层一个id，可以采用两种方式对层进行操作。如果在标签里没有制定id，就必须用layers数组来访问这个层，这样可以直接对层的属性进行操作，也可以利用layer对象的内置方法来进行操作。如：document.layers[1].bgcolor= "green"，如果在<layer>标签里指定了id号为tsinge。就可以用id来访问这个层的属性，如： document.layers.tsinge.bgcolor="green"
3．1．3 事件句柄
事件句柄是界面对象的一个属性，以存储特定的事件处理函数的信息。每当一个事件发生时，javascript解释器就会自动查找界面对象中相应的事件句柄，调用注册在上面的事件处理函数。一般句柄的形式总是事件的名称前面加上前缀on，例如对应事件click的句柄就是onclick。在html中，可以采用如下的语法来定义一个句柄，其实句柄就是一个对象的属性：eventhandler = javascript 语句拥有句柄属性的html标记，主要涉及到一些界面元素。这些元素可以把html同javascript代码相连接。
3．2 编程原理和计算方法
3．2．1 编程原理
在本课题中，采用前面所述的几种技术来实现图档结构树。整个界面采用web框架页面的形式来实现，在框架页面的左边用结构树来导航，把每个叶子节点通过jsp与数据库中的相关内容相关联，从而对图档数据库中的内容来进行分类，关于数据库的这部分内容将在后几章阐述；框架页面的右边用来显示详细的图档数据内容。下面具体讨论结构树的生成和编程原理。
首先，使用html中的<div>标记来预先定义好所有的节点，即每一个节点，包括叶子节点和非叶子节点，每一个使用一个层来表示，由于各个节点之间的逻辑关系，已经确定的他们各自的水平位置关系，如最高层次的节点位于最左边，第二层的节点位于最高层的右边，以此类推。因此，在一开始我们就可以把它们之间的水平位置关系固定好。这可以使用html中的" "标记，即相当于空格，来使每一个层次比较低的节点向右缩进，而又保持每个处于相同层次上的节点缩进的距离相等。如图3-1所示：
在页面被载入浏览器时，再调用初始化函数，使各个子节点都被隐藏掉，而只显示父节点。在每一个除了叶子节点以外的所有节点的html中，都通过定义click事件的句柄来调用相应的javascript函数，来处理该节点的打开或关闭。下面是一个节点的html代码，也就是定义的一个层，其中加黑的部分就是句柄：
<div class=child id=departchild1>
<a target=_self href=javascript:void(null) onclick="expand('departchild1',3)"> <img border=0 height=16 src="parameter/folder_parent.gif" width=16>设计部门分类</a>
</div>
所谓关闭，就是将该节点下面的所有子节点所在的层设置为"隐藏"；所谓打开，就是将该节点下面所有的子节点所在的层设置为"显示"。由于水平的位置关系是确定的，因此不用去管它，而垂直方向的位置，由于在这里的每一个"层"都是采用的相对定位方式，即它出现在文档流中自然位置上，当位于某节点上方的节点为"隐藏"状态时，该位置将被下面的这个节点自动填补，因此，各个节点在任何状态时，再垂直位置上将始终保持紧密连接状，而不会因为某个节点的隐藏而留下空白。
为了形象具体的表现每一个节点，使用两种不同的小图标来表示两类节点，即用folder_parent.gif来表示非叶子节点，用folder_leaf.gif来表示叶子节点。由于各个非叶子节点的超链接，仅仅是用来触发click事件以处理该节点的打开或关闭状态，而不需要链接到其他的页面，因此，这里给href标记定义了一个空操作。而对于叶子节点来说，每一个叶子节点都代表着一类具有某个相同属性的数据集合，为了显示这些数据，通过超链接将其与访问数据库的jsp文件相连结以达到对图档数据库进行分类显示。
3．2．2 计算方法
3．2．2．1 初始化
在页面被加载时，执行的是对页面的初始化，也就是将所有非父节点全部隐藏。 其具体算法如下：首先，将html文当中的<div>标签建立数组，数组的长度就是该html文档中所有<div>标签的个数。这样数组中的每一个元素就对应每一个层，也就是一个节点。然后，通过检测数组中每一个元素的classname属性是parent 还是child，以此来判断该节点是父节点还是非父节点。如果是非父节点则隐藏之，否则，检测下一个数组元素，如此循环，直至将数组所有的元素，也就是所有的节点检测完。 初始化部分代码如下所示：
divcoll = document.all.tags("div"); file://返回<div>标签数组
for (i=0; i<divcoll.length; i++) {
whichel = divcoll(i);
if (whichel.classname == "child")
whichel.style.display = "none"; } file://隐藏所有非父节点
下图是页面初始化的流程图：
3．2．2．2 节点处理
对于节点的处理，是由html中的click事件触发的，通过句柄调用javascript中的处理函数expend(el,num)，其中el为调用节点的id，num是该节点下面的子节点数，根据子节点的命名规则，则子节点id为"el+child+i"，i的最大值为num。由此遍历调用节点的所有子节点。如果子节点是隐藏的则将其所有的都显示，如果子节点是显示的，则将其隐藏，当某个子节点不是叶子节点，也就是说其下面还有叶子节点，此时先将该节点隐藏然后再调用hidechild(name)函数，将该节点下面所有的孩子隐藏掉。这样就可以把调用节点下面的所有孩子节点都隐藏掉。
主要代码如下：
for(var i=1;i<=num;i++) file://对各个子节点进行操作
{
whichel = eval(el + "child"+i);
if (whichel.style.display == "none") file://如果是隐藏的
{
whichel.style.display = "block"; file://显示该节点
}
else file://如果是显示的
{
whichel.style.display = "none"; file://隐藏该子节点
hidechild(el+"child"+i); file://隐藏该子节点下面的孩子节点
