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

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

-->

JavaScript 程序代码：

1addLoadEvent(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!