[JavaScript]树形菜单 DOM 脚本编程实例

晚上参考了网上的三级菜单的脚本写了个代码。效果为点击上级父菜单栏后，下级子菜单栏显示或是隐藏。
DOM 树型结构代码：

<div id="menu">
    <h3>论坛首页</h3>
    <ul>
        <li class="childNode1">
           <a href="#">市场调查</a>
           <ul>
                <li>
                    <a href="#">子栏目</a>
                    <ul>
                        <li>
                            <a href="#">二级子栏目</a>
                            <ul>
                               <li>
                                   <a href="#">三级子栏目</a>
                               </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">子栏目</a>
                </li>
            </ul>
        </li>
        <li class="childNode2"><a href="">会员讨论区</a></li>
        <li class="childNode3"><a href="">趣味派派对</a></li>
        <li class="childNode4"><a href="">伊人时尚</a></li>
        <li class="childNode5"><a href="">超级水水吧</a></li>
        <li class="childNode6"><a href="">行业信息转载</a></li>
        <li class="childNode7"><a href="">会员事务受理区</a></li>
        <li class="childNode8"><a href="">最新消息</a></li>
        <li class="childNode9"><a href="">历史备案</a></li>
        <li class="childNode10"><a href="">使用说明</a></li>
    </ul>
</div>
<!-- end menu -->

JavaScript 程序代码：

1function prepareMenuBar() {
2    menuBar('menu');
3}
4function menuBar(id) {
5    if(!document.getElementById || !document.getElementsByTagName ) return;
6    var oId = document.getElementById(id);
7    if(!oId) return;
8    var oList = oId.getElementsByTagName('ul');
9    var oLink = oId.getElementsByTagName('a');
10   
11    for(var i=0; i<oLink.length; i++) {
12        oLink[i].onclick = function() {
13            if(this.nextSibling.nextSibling.style.display == 'block'){
14                this.nextSibling.nextSibling.style.display = 'none';
15            }
16            else {
17                this.nextSibling.nextSibling.style.display = 'block';
18            }
19           
20            return false;
21        };
22       
23    }
24    for(var j=0; j<oList.length; j++) {
25        oList[j].style.display = 'none';
26    }
27    oList[0].style.display = 'block';
28} 
29
30addLoadEvent(prepareMenuBar);

我们先通过DOM遍历找到该父节点的元素，再找出子节点元素，再DOM遍历，再这样下去，虽然这样可以编写出三级菜单，但这种编写方法还不够灵活，要知道：for遍历DOM节点是拖耗Web性能的。PPK说：你这样写是不行滴！要编写出更好的方法，先把目标事件对象弄清楚。偷偷告诉你哦：想不想用JavaScript写个无限级联的菜单？打住！这里暂且只写出三级菜单先。本人编写的 JavaScript 代码如下：

if(!document.getElementById || !document.getElementsByTagName) return;
var oId = document.getElementById(id);
if(!oId) return;

var oLink = oId.getElementsByTagName('a');

for(var i=0; i<oLink.length; i++) {
    oLink[i].onclick = function(e) {
        var evt = window.event || e;
        var evtTarget = evt.target || evt.srcElement;
        
        var node = evtTarget.nextSibling;
        while(node.nodeType != 1 && node.nextSibling != null) {
            node = node.nextSibling;
        }

        if(node.nodeName == 'UL'){
            if(node.style.display == 'block') {
                node.style.display = 'none';
            }
            else {
                node.style.display = 'block';
            }
        }
        return false;
    };    
}

不好意思，其实早就通过《PPK谈Javascript》学会了，可一直没时间写，现在分享给大家。enjoy!