从这篇开始，你需要拥有一些Javascript和DOM相关的知识才能顺利地学习下去。由于Javascript和DOM都不是三言两语可以说完的东西，如果你对它们还不熟悉，请先到这里学习一下再继续：[url=http://www.w3schools.com/js/default.asp]Javascript在线教程[/url]（英文）、[url=http://www.w3schools.com/htmldom/default.asp]DOM在线教程[/url]（英文）。 [h3]getElementsByClassName()[/h3] 　　为了从一大堆HTML代码中找出我们的树状菜单(也许有多个)，我们先来实现一个通过[code]className[/code]找DOM节点的方法：[code]getElementsByClassName[/code]。这是对浏览器自有DOM方法的一个简单但实用的扩充。 　　此方法有两个参数：[code]ele[/code]指出以哪个DOM节点为根节点寻找（也就是说只找[code]ele[/code]的子节点），[code]className[/code]指出符合条件的节点的class属性中必须包含怎样的[code]className[/code]。它的返回值是一个数组，存放了所有符合条件的节点。

[code]function getElementsByClassName(ele,className) {
 //获取所有子节点
 if(document.all){
  var children = ele.all;
 }else{
  var children = ele.getElementsByTagName('*');
 }
 //遍历子节点并检查className属性
 var elements = new Array();
 for (var i = 0; i < children.length; i++) {
  var child = children[i];
  var classNames = child.className.split(' ');
  for (var j = 0; j < classNames.length; j++) {
   if (classNames[j] == className) {
    elements[elements.length] = child;
    break;
   }
  }
 }
 return elements;
}[/code]

　　最前面的一个if-else语是为了兼容IE5（IE5不能运行[code]document.getElementsByTagName('*')[/code]）。需要注意的是千万不要用浏览器检测的方法来写脚本，而应该直接使用将要用到的语句来测试是否可以执行，如果返回值为[code]null[/code]或[code]undefined[/code]，那再换一种方法。这样的脚本可以有更好的兼容性，也更健壮。 　　[code]elements[elements.length] = child;[/code]，这句同样是为了兼容IE5才没有使用数组的[code]push[/code]方法。如果你一定要使用[code]push[/code]方法，那么可以在执行[code]getElementsByClassName()[/code]之前先重载一[code]遍push[/code]方法。代码如下：

[code]Array.prototype.push = function(value){
 this[this.length] = value;
}[/code]

　　注：原本我希望[code]getElementsByClassName[/code]也能像[code]push[/code]方法一样写，比如[code]HTMLElement.prototype.getElementsByClassName = ...[/code]。不过实际操作的时候发现在运行时[code]HTMLElement[/code]这个对象并不是固定的，每种tag似乎都不一样，只能作罢。如果你有解决方案请告诉我，谢谢。 　　现在我们就可以方便地找出页面上所有的树状菜单了：

[code]var trees = getElementsByClassName(document,'TreeView');
for(var i=0;i<trees.length;i++){
 alert('我是第' + i + '个树状菜单');
 //在这里可以更细致地处理每一个树状菜单
}[/code]

　　最后把上面这几句加到[code]window.onload[/code]事件中运行，以便文档一加载完就对树状菜单进行初始化。完整的代码请查看下面例子的源代码。 　　[url=http://www.sharkui.com/articles/examples/33/ex1.htm]查看效果（例1）[/url] [h3]区分树枝与树叶[/h3] 　　在上一篇中我们说到树枝和树叶的区别就是这个节点有没有子节点，所以判断树枝和树叶的方法也可以从这个角度来考虑。一个比较直观的方法就是遍历整个树状菜单的DOM树（注意这里两个“树”的区别），看看每个节点是不是拥有子节点，如果有的话我们就给这个节点一个专门的class以示区分。我们这里用一种比较取巧的方法，就是判断各个节点的innerHTML中有没有出现字符串[code]'<ul>'[/code]。如果有的话，那么很显然它拥有一个或多个子节点。

[code]var trees = getElementsByClassName(document,'TreeView');
for(var i=0;i<trees.length;i++){
 //先把所有的节点找出来
 var nodes = trees[i].getElementsByTagName('LI');
 //判断各个节点是否有子节点
 for(var j=0;j<nodes.length;j++){
  if(nodes[j].innerHTML.toLowerCase().indexOf('<ul>') > -1)
   nodes[j].className += 'Open';
 }
}
[/code]

　　这里给每个树枝加了一个className：[code]Open[/code]，因为我们现在还不能打开关闭树枝，所以只要是树枝那就是open的。当然后面我们会用到Close的：）。相应的修改一下CSS，给树枝一个带减号的图标，表示它是打开的：

[code].TreeView li.Open{
 background:transparent url(opened.gif) 12px 2px no-repeat;
}[/code]

　　[url=http://www.sharkui.com/articles/examples/33/ex2.htm]查看效果（例2）[/url] [h3]高亮选中项[/h3] 　　接下来实现把当前选中的树枝（或树叶）高亮的功能。有两个时候需要高亮：菜单初始化的时候和点击某个菜单项的时候。 　　初始化的时候比较容易处理，直接给需要高亮的节点一个特殊的Class即可，比如“[code]Selected[/code]”：

[code].TreeView li.Selected a:link,
.TreeView li.Selected a:visited,
.TreeView li.Selected a:hover,
.TreeView li.Selected a:active{
 background-color:#05F;
 color:#FFF;
 text-decoration:none;/*去除下划线*/
 cursor:default;/*让光标变为普通箭头，假装是不能点的^_^*/
 padding:0 2px;/*为了美观考虑，也可以不要这句*/
}[/code]

　　[url=http://www.sharkui.com/articles/examples/33/ex3.htm]查看效果（例3）[/url] 　　这里有几点可能还需要补充说明一下： [list=1] [*]选择器（Selector）的前面为什么要加上[code].TreeView[/code]，这不是冗余代码吗？ 在这个例子中确实是冗余代码，但在实际项目中，一个页面上可能会有各种不同的组件，比如还有一个菜单，被选中的菜单项也用[code].Selected[/code]来表示。这时就需要在选择符的前面先指出是什么组件的选中项以防冲突。当然还有其他的解决办法，比如这里的类不取名为Selectd，改为TreeSelected或者其他什么的，但是这样做人为的把命名方案复杂化了，我个人不推荐这样做。 [/*][*]选择器为什么分作四行来写？ 因为我们之前已经设置过[code]a[/code]的样式，为了提高优先级重载旧的样式，所以需要指定[code]a[/code]的四种伪状态（还有其他提高优先级的办法，关于优先级算法，在《[url=http://www.china-pub.com/computers/common/info.asp?id=18781]网站重构[/url]》一书中有详细说明）。 [/*][*][code]Selected[/code]为什么要用在[code]li[/code]上，而不直接用在[code]a[/code]上？ 这又是一个不太容易说明白的地方，因为很大程度上它是一种个人习惯，只是我个人觉得这样做更合适一些。事实上，写在[code]li[/code]上或[code]a[/code]上都是可以的，至少看上去（表现层的视角）不会有太大的区别，但是如果你从“表现层”中跳出来，站在“结构层”的视角来看，无论这个菜单的树结构还是DOM结构，一个节点都是由一个[code]li[/code]来表达的，[code]a[/code]只不过是这个节点内的更细节的部分。虽然我最终是希望给[code]a[/code]指定一个特殊的样式（为什么不指定给[code]li[/code]？你可以自己试一下），但从XHTML结构来说，这个[code]class="Selected"[/code]还是写在[code]li[/code]上更合适。（上帝保佑我说清楚了……） [/*][/list] [h3]下一篇讲什么？[/h3] 　　这篇文章是我第一次加入Javascript内容，不是很清楚是说浅了还是说深了，请大家在右边留言告诉我你的想法。从下一篇开始，我们开始进入部署鼠标事件和响应鼠标事件方面的内容。也许从下下篇开始再加入一些Javascript面向对象编程的内容，待定待定……hehe^_^