用UL列表实现树目录（带连接线）

网上找到的用UL列表做的树，都没有连接线。如果把虚线作为ul的的背景，就可以做成有连线的ul树，显示效果和梅花雪的树一样。效果在这：http://mz.host.dxsidc.com/

下面是我做的树，定义树的结构用xml文件，动态增加节点也用xml。
和梅花雪的对比了一下，初始化的速度慢了好多。xmldom的速度慢是个大原因，但除了这一部分，运行的时间还是比梅花雪的要多（我的也是参考梅花雪的异步显示，第一次只显示第一级节点，其他的点击展开时再生成html）。
看来还是有差距。哪位高手给指点指点，再提高一下速度。

//mytree.js
function MyTree(treename)
{
if(typeof(treename) != "string" || treename == "") throw(new Error(-1, '没有定义树的名字！'));
this.link = "#";
this.target = "_self";
this.imgpath = "image/";
this.xmlfile = "xmltree.xml";
this.name = treename;
this.current = "";
this.node = {};
this.node["root"] = {"childnodes":[]};
this.sty='<style>.MyTree {font-size:12px;} .MyTree ul {padding-left:0px!important; padding-left:0px; margin-left:0px!important; margin-left:0px; background-image:url("'+this.imgpath+'back.gif"); background-repeat: repeat-y;} .MyTree ul.nobg {background-position:-10px;} .MyTree ul li {list-style:none; padding-left:20px;}.MyTree ul li.first{padding-left:0px;} .MyTree A {outline: none; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-TOP: 3px; PADDING-BOTTOM: 1px; color: #000060; TEXT-DECORATION: none} .MyTree A:hover {background: #7386ba; color: #fff; TEXT-DECORATION: none}</style>';

this.createXMLDOM = function()
{
var xmldom;
if (window.ActiveXObject)
{ var ActiveX = new Array("MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XMLDOM","MSXML.DOMDocument");
for(var i=0;i<ActiveX.length;i++)
{ try{ xmldom = new ActiveXObject(ActiveX[i]);break;}catch(e){} }
}
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;
};

this.loadXML = function(xml)
{
var ie = (window.ActiveXObject)?true:false, flag=false;
var obj = this.createXMLDOM();
if(xml==null || xml=='') flag=obj.load(this.xmlfile); else { //没有参数，就从文件读xml
if(ie) flag=obj.loadXML(xml); else {
var oParser=new DOMParser();
var obj=oParser.parseFromString(xml,"text/xml");
flag=true;
}}

if (flag)
{ var nodes=obj.getElementsByTagName('node');
if (nodes != null && nodes.length > 0)
{ var id='',pid='';
for(var i=0;i<nodes.length;i++)
{ id=nodes[i].getAttribute('id');
pid=nodes[i].getAttribute('pid');
if(typeof(this.node[pid])=="undefined") continue;//xml中如果子节点出现在母节点前，这个子节点将被忽略
this.node[id]=
{ "id":id,
"pid":pid,
"name":nodes[i].getAttribute('name'),
"isload":false
//"childnodes":[]
};
if(nodes[i].getAttribute('link')!=null) this.node[id].link=nodes[i].getAttribute('link');
if(nodes[i].getAttribute('target')!=null) this.node[id].target=nodes[i].getAttribute('target');
if(nodes[i].getAttribute('icon')!=null) this.node[id].icon=nodes[i].getAttribute('icon');
if(nodes[i].getAttribute('method')!=null) this.node[id].method=nodes[i].getAttribute('method');
if(typeof(this.node[pid].childnodes)=="undefined") this.node[pid].childnodes=[];
this.node[pid].childnodes[this.node[pid].childnodes.length]=this.node[id];
}
} else alert('No Valid treeNode!');
} else alert('XML Data Load Error!');
obj=null;
};

this.buildchild = function(id,end)
{
var ohtml='',icon1='',icon2='';
var classname=(end==true)?' class="nobg"':'';
if(typeof(this.node[id].childnodes)=="undefined") return ohtml;

var cn=this.node[id].childnodes;
if(cn.length>0)
{
ohtml='<SPAN style="display:none;"><UL'+ classname +'>';
for(var i=0;i<cn.length;i++)
{ if(typeof(cn[i].childnodes)=="undefined") {icon1=((i==cn.length-1)?'l2.gif':'l1.gif');icon2=(typeof(cn[i].icon)=="undefined")?'file.gif':cn[i].icon;} else {icon1=((i==cn.length-1)?'p2.gif':'p1.gif');icon2='folder.gif';}
ohtml+='<LI id="mytree_' + cn[i].id + '"><SPAN onclick="'+ this.name +'.clickhandle('+ cn[i].id +',event);"><IMG align=absmiddle src="'+ this.imgpath + icon1 +'"><IMG align=absmiddle src="'+ this.imgpath + icon2 +'"><A hidefocus onfocus="'+ this.name +'.focusid('+ cn[i].id +')" href="'+ ((typeof(cn[i].link)=="undefined")?this.link:cn[i].link) +'" target="'+ ((typeof(cn[i].target)=="undefined")?this.target:cn[i].target) +'">'+ cn[i].name +'</a></SPAN></LI>';
}
ohtml+='</UL></SPAN>';
this.node[id].isload=true;
}
return ohtml;
};

this.tostring = function(dynamic)
{
if(dynamic!=true) this.loadXML();
var ohtml='',icon1='',icon2='';
var cn=this.node["root"].childnodes;
if(cn.length>0)
{ ohtml='<SPAN onclick="'+ this.name +'.clickhandle('+cn[0].id+',event);"><IMG align=absmiddle src="'+ this.imgpath + ((typeof(cn[0].icon)=="undefined")?'root.gif':cn[0].icon)+ '"><A style="color:#ffffff; background:#0A246A;" hidefocus onfocus="'+ this.name +'.focusid('+ cn[0].id +')" href="'+ ((cn[0].link==null)?this.link:cn[0].link) +'" target="'+ ((cn[0].target==null)?this.target:cn[0].target) +'">'+ cn[0].name +'</A></SPAN><SPAN><UL class="nobg" style="margin-top:0px;">';//顶层节点，只取第一个
this.current=cn[0].id;

if(typeof(cn[0].childnodes)!="undefined")
{ cn[0].isload=true;
cn=cn[0].childnodes;
for(var i=0;i<cn.length;i++)
{ if(typeof(cn[i].childnodes)=="undefined") {icon1=((i==cn.length-1)?'l2.gif':'l1.gif');icon2=(typeof(cn[i].icon)=="undefined")?'file.gif':cn[i].icon;} else {icon1=((i==cn.length-1)?'p2.gif':'p1.gif');icon2='folder.gif';}
ohtml+='<LI class="first" id="mytree_' + cn[i].id + '"><SPAN onclick="'+ this.name +'.clickhandle('+ cn[i].id +',event);"><IMG align=absmiddle src="'+ this.imgpath + icon1 +'"><IMG align=absmiddle src="'+ this.imgpath + icon2 +'"><A hidefocus onfocus="'+ this.name +'.focusid('+ cn[i].id +')" href="'+ ((typeof(cn[i].link)=="undefined")?this.link:cn[i].link) +'" target="'+ ((typeof(cn[i].target)=="undefined")?this.target:cn[i].target) +'">'+ cn[i].name +'</a></SPAN></LI>';
}
}
ohtml+='</UL></SPAN>';
}

if(dynamic==true) return ohtml;
return '<DIV class="MyTree" id="mytree_'+this.node['root'].childnodes[0].id+'">'+ohtml+'</DIV>'+this.sty;
};