XML+JS创建树形菜单

      简单说明：思路：从数据岛menuxml(标准化越来越近了)中读取数据，从树的根节点开始分析树，利用 hasChildNodes（） [方法：是否含有子节点 ] 判断当前节点是否有子节点，如果有子节点继续向下分析 childNodes [对象：子节点对象集合] ，否则返回当前分析结果（树结点对象）。主要的函数：createTree（thisn /*树结点*/ ， sd/*树深度*/）

运行代码＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"＞＜HTML＞＜HEAD＞＜TITLE＞ DSTree ＜/TITLE＞＜META NAME="Author" CONTENT="sTarsjz@hotmail.com" ＞＜style＞body,td{font:12px verdana}#treeBox{background-color:#fffffa; }#treeBox .ec{margin:0 5 0 5; }#treeBox .hasItems{font-weight:bold; height:20px; padding:3 6 0 6; margin:2px; cursor:hand; color:#555555; border:1px solid #fffffa; }#treeBox .Items{height:20px; padding:3 6 0 6; margin:1px; cursor:hand; color:#555555; border:1px solid #fffffa; }＜/style＞＜base href="http://vip.5d.cn/star/dstree/" /＞＜script＞//code by star 20003-4-7var HC = "color:#990000; border:1px solid #cccccc"; var SC = "background-color:#efefef; border:1px solid #cccccc; color:#000000; "; var IO = null; function initTree(){var rootn = document.all.menuxml(标准化越来越近了).documentElement; var sd = 0; document.onselectstart = function(){return false; }document.all.treeBox.appendChild(createTree(rootn,sd)); }function createTree(thisn,sd){var nodeObj = document.createElement("span"); var upobj = document.createElement("span"); with(upobj){style.marginLeft = sd*10; className = thisn.hasChildNodes()?"hasItems":"Items"; innerHTML = "＜img src="/edu/UploadPic/2008-3/200834151032525.gif" class=ec＞" + thisn.getAttribute("text") +""; onmousedown = function(){if(event.button != 1) return; if(this.getAttribute("cn")){this.setAttribute("open",!this.getAttribute("open")); this.cn.style.display = this.getAttribute("open")?"inline":"none"; this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif"; }if(IO){IO.runtimeStyle.cssText = ""; IO.setAttribute("selected",false); }IO = this; this.setAttribute("selected",true); this.runtimeStyle.cssText = SC; }onmouseover = function(){if(this.getAttribute("selected"))return; this.runtimeStyle.cssText = HC; }onmouseout = function(){if(this.getAttribute("selected"))return; this.runtimeStyle.cssText = ""; }oncontextmenu = contextMenuHandle; onclick = clickHandle; }if(thisn.getAttribute("treeId") != null){upobj.setAttribute("treeId",thisn.getAttribute("treeId")); }if(thisn.getAttribute("href") != null){upobj.setAttribute("href",thisn.getAttribute("href")); }if(thisn.getAttribute("target") != null){upobj.setAttribute("target",thisn.getAttribute("target")); }nodeObj.appendChild(upobj); nodeObj.insertAdjacentHTML("beforeEnd","＜br＞")if(thisn.hasChildNodes()){var i; var nodes = thisn.childNodes; var cn = document.createElement("span"); upobj.setAttribute("cn",cn); if(thisn.getAttribute("open") != null){upobj.setAttribute("open",(thisn.getAttribute("open")=="true")); upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none"; if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif"; }for(i=0; i＜nodes.length; cn.appendChild(createTree(nodes[i++],sd+1))); nodeObj.appendChild(cn); }else{upobj.all.tags("img")[0].src ="endnode.gif"; }return nodeObj; }window.onload = initTree; ＜/script＞＜script＞function clickHandle(){// your code here }function contextMenuHandle(){event.returnValue = false; var treeId = this.getAttribute("treeId"); // your code here}＜/script＞＜/HEAD＞＜BODY＞＜xml(标准化越来越近了) id=menuxml(标准化越来越近了)＞＜?xml(标准化越来越近了) version="1.0" encoding="GB2312"?＞＜DSTreeRoot text="根节点" open="true" href="http://" treeId="123"＞＜DSTree text="技术论坛" open="false" treeId=""＞＜DSTree text="5DMedia" open="false" href="http://" target="box" treeId="12"＞＜DSTree text="网页编码" href="http://" target="box" treeId="4353" /＞＜DSTree text="手绘" href="http://" target="box" treeId="543543" /＞＜DSTree text="灌水" href="http://" target="box" treeId="543543" /＞＜/DSTree＞＜DSTree text="BlueIdea" open="false" href="http://" target="box" treeId="213"＞＜DSTree text="DreamWeaver & JS" href="http://" target="box" treeId="4353" /＞＜DSTree text="FlashActionScript" href="http://" target="box" treeId="543543" /＞＜/DSTree＞＜DSTree text="CSDN" open="false" href="http://" target="box" treeId="432"＞＜DSTree text="JS" href="http://" target="box" treeId="4353" /＞＜DSTree text="xml(标准化越来越近了)" href="http://" target="box" treeId="543543" /＞＜/DSTree＞＜/DSTree＞＜DSTree text="资源站点" open="false" treeId=""＞＜DSTree text="素材屋" href="http://" target="box" treeId="12" /＞＜DSTree text="桌面城市" open="false" href="http://" target="box" treeId="213"＞＜DSTree text="壁纸" href="http://" target="box" treeId="4353" /＞＜DSTree text="字体" href="http://" target="box" treeId="543543" /＞＜/DSTree＞＜DSTree text="MSDN" open="false" href="http://" target="box" treeId="432"＞＜DSTree text="DHTML" href="http://" target="box" treeId="4353" /＞＜DSTree text="HTC" href="http://" target="box" treeId="543543" /＞＜DSTree text="xml(标准化越来越近了)" href="" target="box" treeId="2312" /＞＜/DSTree＞＜/DSTree＞＜/DSTreeRoot＞＜/xml(标准化越来越近了)＞＜table style="position:absolute; left:100; top:100; "＞＜tr＞＜td id=treeBox style="width:400px; height:200px; border:1px solid #cccccc; padding:5 3 3 5; " valign=top＞＜/td＞＜/tr＞＜tr＞＜td style="font:10px verdana; color:#999999" align=right＞by ＜font color=#660000＞sTar＜/font＞＜br＞ 2003-4-8＜/td＞＜/tr＞＜/table＞＜/BODY＞＜/HTML＞