JS读取XML文件形成树结构

        某日在做根据后台返回的XML字符串形成树状菜单，因为之前并没有怎么操作过XML文件，所以去求助了一下百度，奈何怎么也找不到符合我要求的答案。最后退而求其次，找到了根据XML文件形成树状菜单的示例，不过有蛮久过去了，已经找不到原来的文章地址在哪了，所以自己备忘一下。

        主要是一个JS插件，我直接附上代码吧。

/* JavaScript Document */

/*

xmlTree v1.2
=================================

Infomation
----------------------
Author   : Lapuasi
E-Mail   : lapuasi@gmail.com
WebSite  : http://www.lapuasi.com/javascript
DateTime : 2005-12-25


Example页面调用示例
----------------------
var tree = new xmlTree('tree'); //创建对象
tree.mode = 1; //默认节点是否闭合，0是闭合，1是展开
tree.createTree(); //调用方法


for Internet Explorer, Mozilla Firefox
*/


function xmlTree(name) {
    this.name         = name;                   //
    this.xmlFile      = 'NodeList2.xml';          //Ĭ指定xml文件
    this.iconPath     = 'images/'               //文件图标目录
    this.iconFolder   = 'tree_icon_folder.gif'; //父级文件夹图标
    this.iconFile     = 'tree_icon_file.gif';   //子级文件图标
    this.iconOpen     = 'tree_arrow_open.gif';  //展开节点时图标
    this.iconOver     = 'tree_arrow_over.gif';  //
    this.iconClose    = 'tree_arrow_close.gif'; //关闭节点时图标
    this.mode         = 0;                      //
    this.html         = '';                     //定义html字符串
    this.prevTip      = null;                   //
    this.prevSelected = null;                   //
}

xmlTree.prototype.createXMLDOM = function() { 创建XMLDOM对象
    var xmldom;
    if (window.ActiveXObject){
        var xmldom = new ActiveXObject("Microsoft.XMLDOM");
    } else {
        if (document.implementation && document.implementation.createDocument) {
            var xmldom = document.implementation.createDocument("","doc",null);
        }
    }
    xmldom.async = false;
    xmldom.resolveExternals = false;
    xmldom.validateOnParse = false;
    xmldom.preserveWhiteSpace = true;
    return xmldom;
}

xmlTree.prototype.createTree = function() { //调用方法
    var xmldom = this.createXMLDOM();
    document.write('<div id="tree"><\/div>'); // 创建树外包裹的div对象
    document.write('<div id="treeTip"><\/div>'); //
    document.getElementById('treeTip').style.visibility = 'visible';
    document.getElementById('treeTip').style.display = 'none';
    if (xmldom.load(this.xmlFile)) {
        this.createNodes(xmldom);
    } else {
        this.html = 'Load XML Error';
    }
    document.getElementById('tree').innerHTML = this.html;
    return;
}

xmlTree.prototype.getFirstChildData = function(obj, name) { //获取第一个子级
    var result = '';
    if (typeof(obj) == 'object' && name != null && name != '') {
        var node = obj.getElementsByTagName(name);
        if (node != null && node.length > 0) {
            result = node[0].firstChild.data;
        }
    }
    return result;
}

xmlTree.prototype.checkChildNodes = function(obj, id) { //检查是否有子级
    var result = false;
    var nodes = obj.getElementsByTagName('Node');
    if (nodes != null && nodes.length > 0) {
        //var pid;
        for (var i = 0; i < nodes.length; i++) {
            //pid = nodes[i].getAttribute('parentid');
            if (nodes[i].getAttribute('ParentID') == id) {
                result = true;
                break;
            }
        }
    }
    return result;
}
//Download by http://www.jb51.net
xmlTree.prototype.createNodes = function(obj, id) { //拼接节点字符串，形成节点
    if (typeof(id) == 'undefined') id = null; //
    var nodes = obj.getElementsByTagName('Node');
    if (nodes != null && nodes.length > 0) {
        var modeClass, modeSrc, iconClass, iconSrc;
        var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes;
        
        //设置节点默认闭合状态
        modeClass = 'close';
        modeSrc = this.iconPath + this.iconClose;
        if (this.mode == 1) {
            modeSrc = this.iconPath + this.iconOpen;
            modeClass = 'open';
        }
        if (id == null) modeClass = 'open'; //
        this.html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">';

        for (var i = 0; i < nodes.length; i++) {
            npid = nodes[i].getAttribute('ParentID');
            if(npid==""){
                npid=null;
            }
            if (npid == id) {
                //
                modeClass = 'close'; iconClass = 'icon-file'; iconSrc = this.iconPath + this.iconFile;

                //拼接父级节点
                nid = nodes[i].getAttribute('id');
                this.html += '<li id="tree_' + nid + '"><span onclick="' + this.name + '.action(this,event);" onmouseover="' + this.name + '.action(this,event);" onmouseout="' + this.name + '.action(this,event);">';
               
                nicon = this.getFirstChildData(nodes[i], 'icon');
                hasChildNodes = this.checkChildNodes(obj, nid);
                if (hasChildNodes) {
                    iconClass = '';
                    iconSrc = this.iconPath + this.iconFolder;
                    this.html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //
                }
                if (nicon != '') iconSrc = nicon;
                this.html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //

                nlink = this.getFirstChildData(nodes[i], 'link');
                if (nlink != '') {
                    nlink = ' href="' + nlink + '"';
                } else {
                    nlink = ' href="javascript:;"';
                }

                //
                ntarget = this.getFirstChildData(nodes[i], 'target');
                if (ntarget != '') {
                    ntarget = ' target="' + ntarget + '"';
                }

                //
                nexplain = this.getFirstChildData(nodes[i], 'explain');
                if (nexplain != '') {
                    nexplain = ' onmouseover="' + this.name + '.treeTips(\'' + nexplain + '\');" onmouseout="' + this.name + '.treeTips();"'
                }

                //
                nname = this.getFirstChildData(nodes[i], 'Name');
                this.html += '<a id="tree_' + nid + '_l" onclick="' + this.name + '.action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>';

                //obj.documentElement.removeChild(nodes[i]);
                if (hasChildNodes) this.createNodes(obj, nid); //

                this.html += '<\/li>';
            }
        }
        this.html += '<\/ul>';
    }
    return;
}

xmlTree.prototype.action = function(obj, e) { //节点点击事件
    e = e ? e : (window.event ? window.event : null); //
    e = e.type;
    if (obj.tagName == 'A') {
        try {
            this.prevSelected.className = '';
        var ss=obj.parentElement.parentElement;
        var dd=ss.childNodes;
        if(dd.length==1){
            var cc=obj.id;
            alert(cc.replace("tree_","").replace("_l",""));
        }
        }
        catch(e) {
            var ss=obj.parentElement.parentElement;
        var dd=ss.childNodes;
        if(dd.length==1){
            var cc=obj.id;
            alert(cc.replace("tree_","").replace("_l",""));
        }
        }
        this.prevSelected = obj;
        obj.className = 'selected';
    }
    if (obj.tagName == 'SPAN') {
        var arrow = obj.firstChild; //
        var borther = obj;
        while (borther.tagName != 'UL') { //
            borther = borther.nextSibling;
            if (borther == null) break;
        }
        if (borther != null) {
            switch (e) { //
                case 'click':
                    if (borther.className == 'open') {
                        borther.className = 'close';
                        arrow.src = this.iconPath + this.iconClose;
                    } else {
                        borther.className = 'open';
                        arrow.src = this.iconPath + this.iconOpen;
                    }
                    break;
                case 'mouseover':
                    if (arrow.tagName == 'IMG' && borther.className == 'close') {
                        arrow.src = this.iconPath + this.iconOver;
                    }
                    break;
                case 'mouseout':
                    if (arrow.tagName == 'IMG' && borther.className == 'close') {
                        arrow.src = this.iconPath + this.iconClose;
                    }
                    break;
            }
        }
    }
    return;
}

xmlTree.prototype.treeTips = function(msg) { //
    if (this.prevTip != null) clearTimeout(this.prevTip);
    var obj = document.getElementById('treeTip');
    if (obj != null) {
        if (this.treeTips.arguments.length < 1) { // hide
            obj.style.display = 'none';
        } else { // show
            obj.innerHTML = msg;
            this.prevTip = setTimeout('document.getElementById("treeTip").style.display = "block"',300);
            document.onmousemove = this.moveToMouseLoc;
        }
    }
    return;
}

xmlTree.prototype.moveToMouseLoc = function(e) { //
    var obj = document.getElementById('treeTip');
    if (obj != null) {
        var offsetX = -10, offsetY = 20;
        var x = 0, y = 0;
        if (window.event) {
            x = event.x + document.body.scrollLeft;
            y = event.y + document.body.scrollTop;
        } else {
            x = e.pageX;
            y = e.pageY;
        }
        obj.style.left = x + offsetX + 'px';
        obj.style.top = y + offsetY + 'px';
    }
    return;
}

     这个JS靠自己研究，我下载文件时注释全是乱码，以上写的注释纯属个人理解，没写的我也不知如何描述，自己看吧，应该是能看懂的。下面是效果图