html 如何讀取 xml

實例如下：

首先：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>/</link>

</node>

</tree>

<node id="p1-3">

<text>富鎮</text>

<target>_blank</target>

<title>鄉鎮</title>

<link>/</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>/</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>/</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>/</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>

//////////////////////////////////////////////////////////

運行，要在同壹個路徑下！