简单说明:思路:从数据岛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-7 var 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=expand.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> <br /> <br /> <center> <strong> <font color="#0000FF">如果您对本文有任何疑问或者建议，请到讨论区发表您的意见:</font> </strong><a href="http://bbs.linux-cn.com" target="_blank"><strong><font color="#FF0000">>> 论坛入口 <<</font></strong></a> <br> <br> <div class="articlepages"><a href='#'>上一页</a><strong>1</strong><a href='24059_2.html'>2</a> <a href='24059_2.html'>下一页</a> </div> </center><br /><br /> 上一篇：<a href='/html/program/XML/20070428/24058.html'>使用.NET存储XML数据</a> 下一篇：<a href='/html/program/XML/20070428/24060.html'>XML Spy实例教程</a> <br /><br /> <center> 【<a href="/plus/feedback.php?arcID=24059" title="文章评论" target="_blank">文章评论</a>】 【<a href="javascript:window.external.addFavorite('http://www.linux-cn.com/plus/view.php?aid=24059','XML+ JS创建树形菜单|Linux中国')" title="收藏本文" target="_blank">收藏本文</a>】 【<a href="/plus/recommend.php?arcID=24059" title="推荐好友" target="_blank">推荐好友</a>】 【<a href="javascript:window.print();" title="打印本文" target="_self">打印本文</a>】 【<a href="/member/article_add.php" target="_blank">我要投稿</a>】 【<a href="http://bbs.linux-cn.com" target="_blank">论坛讨论</a>】</center> </div> </div> <!-- end of articlearea --> <div class="articleadtop728"><script src='/plus/ad_js.php?aid=23' language='javascript'></script></div> <div class="title">更多相关文章</div> <div class="relativearticle">·<a href='/html/program/XML/20070604/49994.html'>使用 XML 文件记录操作日志</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49993.html'>XML 问题: 超越DOM(轻松使用 DOM 的技巧和诀窍) </a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49992.html'>利用XSLT把ADO记录集转换成XML</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49991.html'>從無到有實現一個xml數據庫登錄驗証</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49990.html'>XML 增、删、改和查示例</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49989.html'>读写xml所有节点个人小结和读取xml节点的数据总</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49988.html'>XML技巧五则</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49987.html'>灵活调用xsl来解析xml文档(js异步)</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49986.html'>xml文件调用css</a></div><div class="relativearticle">·<a href='/html/program/XML/20070604/49985.html'>对于任意的XML的遍历</a></div> </div> </td> <td class="channelright"> <div class="rightad250_250"> <script src='/plus/ad_js.php?aid=19' language='javascript'></script> </div> <div class="suggestarticles"> <div class="title">推荐文章</div> <div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/23992.html'>一个简单的XML Schema的例子</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24021.html'>将HTML表单数据存储为XML格式(1)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49959.html'>多级联动下拉选择框，动态获取下一</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24074.html'>使用DOM创建XML</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24184.html'>利用MSXML解析XML文本</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49958.html'>利用xslt对xml进行缩进格式化处理</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24046.html'>XML、Web服务和.NET框架(2)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49924.html'>XSL中利用xsl:for-each时给每一项添</a></div> </div> <div class="rightad250_300"> <script src='/plus/ad_js.php?aid=20' language='javascript'></script> </div> <div class="randsuggest"> <div class="title">精彩文章</div> <div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/23970.html'>XSL简明教程(4)在服务器端的实现</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24182.html'>XML入门精解之结构与语法(2)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24193.html'>默认名字空间</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24006.html'>XML 技术指南(2)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24069.html'>XML 中的常见问题 (二)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49946.html'>xml中的空格之完全解说</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24161.html'>第11章 嵌入非XML数据</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24001.html'>JSP+XML的技术纲要(2)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49930.html'> XML创建可排序、分页的数据显示页</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/23971.html'>XSL简明教程(5)XSL的索引</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24044.html'>加密的XML</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24086.html'>在 Excel 2003 中创建 XML 映射</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24135.html'>亲密接触XML(5)---XML元素</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24136.html'>亲密接触XML(6）－元素的内容</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24208.html'>XSL基础教程第一章</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24109.html'>.NET Framework轻松处理XML数据(四)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24141.html'>大话XML</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/23961.html'>XSL基础教程第五章</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49979.html'>从XML中读取数据到内存的实例</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24091.html'>如何将XML文件中的数据传送并保存在</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49955.html'>概述IE和SQL2k开发一个XML聊天程序</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24043.html'>如何建立一个 XML 的开发环境(2)</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070604/49954.html'>如何得到XML文档大小</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24137.html'>亲密接触XML(7）－ 元素 vs. 属性的</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/24156.html'>XML轻松学习手册（7）</a></div><div class="suggestarticlestitle">·<a href='/html/program/XML/20070428/23987.html'>XML在语音中的应用(二)</a></div> </div> </td> </tr> </table> <div class="bottomnav bigwidthwithborder"> <script type="text/javascript" language="javascript" src="/linuxcn/js/bottomnav.js"></script> </div> <div class="bottomcopyright bigwidth"> <a href='http://www.linux-cn.com' target='_blank'>Power by linux-cn.com</a> <a href="http://www.miibeian.gov.cn" target="_blank">粤ICP备05006655号</a> <script language="javascript" type="text/javascript" src="/linuxcn/js/allbottom.js"></script> </div> </body> </html>
