java script 读取xml (转贴)

kuangbaoxu

首先：xml文件（tree.xml）内容如下：
<?xml version="1.0" encoding="gb2312"?> <treeview> <tree id="p1"> <text>山东省</text> <target>_blank</target> <title>省份</title> <link></link> <tree id="p1-1"> <text>威海市</text> <target>_blank</target> <title>城市</title> <link></link> </tree> <tree id="p1-2"> <text>烟台市</text> <target>_blank</target> <title>城市</title> <link></link> <node id="p1-2-1"> <text>长夼村</text> <target>_blank</target> <title>乡镇</title> <link>http://www.baidu.com/</link> </node> </tree> <node id="p1-3"> <text>富镇</text> <target>_blank</target> <title>乡镇</title> <link>http://www.baidu.com/</link> </node> </tree> <tree id="p2"> <text>河北省</text> <target>_blank</target> <title>省份</title> <link></link> <tree id="p2-1"> <text>泊头市</text> <target>_blank</target> <title>城市</title> <link></link> <node id="p2-1-1"> <text>郊河</text> <target>_blank</target> <title>乡镇</title> <link>http://www.baidu.com/</link> </node> </tree> <tree id="p2-2"> <text>石家庄</text> <target>_blank</target> <title>城市</title> <link></link> </tree> </tree> <tree id="p3"> <text>浙江省</text> <target>_blank</target> <title>省份</title> <link></link> <tree id="p3-1"> <text>杭州市</text> <target>_blank</target> <title>城市</title> <link></link> <node id="p3-1-1"> <text>某镇</text> <target>_blank</target> <title>乡镇</title> <link>http://www.baidu.com/</link> </node> </tree> <tree id="p3-2"> <text>温州市</text> <target>_blank</target> <title>城市</title> <link></link> <node id="p3-2-1"> <text>某镇</text> <target>_blank</target> <title>乡镇</title> <link>http://www.baidu.com/</link> </node> </tree> </tree> </treeview>
//////////////////////////////////////////////////////
然后：javascript函数实现：(文件名称：tree.htm）
<script Language="JavaScript"> var HTML = ""; var space = ""; var blank = "  "; function getSubject() { var xmlDoc; if(window.ActiveXObject) { //获得操作的xml文件的对象 xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); xmlDoc.async = false; xmlDoc.load("tree.xml"); if(xmlDoc == null) { alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!'); window.location.href='/Index.aspx'; return; } } //解析xml文件，判断是否出错 if(xmlDoc.parseError.errorCode != 0) { alert(xmlDoc.parseError.reason); return; } //获得根接点 var nodes = xmlDoc.documentElement.childNodes; //得到根接点下共有子接点个数，并循环 for(var i=0; i<nodes.length; i++) { //如果接点名为 tree if(nodes(i).nodeName == "tree") { readTree(nodes(i)); } //如果接点名为 node else if(nodes(i).nodeName == "node") { readNode(nodes(i)); } } //删除对象 delete(xmlDoc); //显示HTML window.show.innerHTML = HTML; return; } //读Tree节点 function readTree(cI) { var nodes = cI.childNodes; var menuHTML = space; menuHTML += blank; //得到超级链接 menuHTML += "<a href='"; //如果该节点的连接属性不为空，则连接 if(cI.selectNodes("link")(0).text != "") { menuHTML += cI.selectNodes("link")(0).text; } //否则为空链接 else { menuHTML += "#"; } //目标 if(cI.selectNodes("target")(0).text != "") { menuHTML += " target='"+cI.selectNodes("target")(0).text; menuHTML += "'"; } //点击菜单事件，调用divshow(vid)函数 menuHTML += " onclick=javascript:divshow('"+cI.getAttribute("id")+"');"; //得到节点标题 menuHTML += " title='"; menuHTML += cI.selectNodes("title")(0).text; //结束 menuHTML += "'>"; //得到节点的正文 menuHTML += cI.selectNodes("text")(0).text; menuHTML += "</a><br>\n"; //将menuHTML设置添加到HTML字符串 HTML += menuHTML; //得到该节点的属性值<span HTML += "<div id='"+cI.getAttribute("id")+"' style='display:none'>\n"; for(var i=0; i<nodes.length; i++) { var tempImg = ""; tempImg += blank; if(nodes(i).nodeName == "tree") { space += tempImg; readTree(nodes(i)); space = ""; } else if(nodes(i).nodeName == "node") { space += tempImg; readNode(nodes(i)); } } HTML += "</div>\n"; return; } //读Node节点 function readNode(cI) { var nodeHTML = space; nodeHTML += blank; //设置超级链接 nodeHTML += "<a href='"; //得到连接地址 nodeHTML += cI.selectNodes("link")(0).text; //目标 if(cI.selectNodes("target")(0).text != "") nodeHTML += "' target='"+cI.selectNodes("target")(0).text; //得到节点标题 nodeHTML += "' title='"; nodeHTML += cI.selectNodes("title")(0).text; //结束 nodeHTML += "'>"; //得到节点的正文 nodeHTML += cI.selectNodes("text")(0).text; nodeHTML += "</a><br>\n"; HTML += nodeHTML; //HTML += "<div id='"+cI.getAttribute("id")+"'>"; space = ""; return; } //操作对象的显示还是隐藏效果 function divshow(vid) { if(document.all[vid].style.display == "none") { document.all[vid].style.display = "block"; } else { document.all[vid].style.display = "none"; } return; } </script>


<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS_XML</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-size: 9pt; } A { text-decoration:none; font-family: "宋体"; font-size: 9pt; COLOR:#000000; } --> </style> </head> <body bgcolor="#EEEEEE" leftmargin="0" topmargin="0"> <div id=show></div> </body> <script> getSubject() </script> </html>

运行，要在同一个路径下！