JavaScript 讀取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>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>
//////////////////////////////////////////////////////////
運行，要在同一個路徑下！