应用JScript和XML自定义无刷新多级联动菜单

核心提示： 2）通过循环（遍历）节点树；例如下面的例子循环了根节点的所有子结点，并显示了它们的名称：var nodes=xmlDoc.documentElement.childNodes;for (i=0;i< nodes.length;i++){document.write(nodes [i]

2）通过循环（遍历）节点树；

例如下面的例子循环了根节点的所有子结点，并显示了它们的名称：

var nodes=xmlDoc.documentElement.childNodes;
for (i=0;i< nodes.length;i++)
{
document.write(nodes [i].nodeName);
document.write("<br />");
}

3）通过节点的关系在节点树中导航；

在 XML DOM 中，节点的关系被定义为节点的属性，包括parentNode属性、childNodes属性、firstChild属性、lastChild属性、nextSibling属性以及previousSibling属性。

访问节点之后是获取节点值，通常有两种方式：

1）nodeValue属性用于获取节点的文本值；

2）getAttribute()方法用于返回属性的值。

下面仅以加载中国地市级行政区域的代码为例来说明级联菜单如何加载XML数据。

function loadcity(pvalue)
{
　　　 var xmlDoc;
　　　 var tablehtml="";
　
　　　 if(window.ActiveXObject)
　　　 {
　　　　　　　 //获得操作的xml文件的ActiveXObject类型对象
　　　　　　　 xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
　　　　　　　 xmlDoc.async = false;
　　　　　　　 xmlDoc.load("js/Chinadomain.xml");
　　　　　　　 if(xmlDoc == null)
　　　　　　　 {
　　　　　　　 alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
　　　　　　　 window.location.href='Error.aspx';
　　　　　　　 return;
　　　　　　　 }
　　　 }
　
　　　 //解析xml文件，判断是否出错
　　　 if(xmlDoc.parseError.errorCode != 0)
　　　 {
　　　　　　　 alert(xmlDoc.parseError.reason);
　　　　　　　 return;
　　　 }
　
　　　　 //通过documentElement属性获得根接点
　　　 var nodes = xmlDoc.documentElement.childNodes;
　　　 //得到根接点下共有子接点个数，并循环
　　　 for(var i=0; i<nodes.length; i++)
　　　 {
　　　　　　　 var node=nodes(i);
　　　　　　　 if(node.getAttribute("value")==pvalue)
　　　　　　　 {
　　　　　　　　　　　　　　　　　　　　 //通过getAttribute获得节点属性值
　　　　　　　　　　　 document.getElementById("oSelect").innerText=node.getAttribute("name");
　　　　　　　　　　　　　　　　　　　　 //通过表示节点的关系的属性值来访问节点
　　　　　　　　　　　 var cnodes=node.childNodes;
　　　　　　　　　　　　　　　　　　　　 //通过循环（遍历）来访问节点
　　　　　　　　　　　 for(var i=0; i<cnodes.length; i++)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 var n_value=cnodes(i).getAttribute("value");
　　　　　　　　　　　　　　　 var n_name=cnodes(i).getAttribute("name");　
　　　　　　　　　　　　　　　 var stemp=""+"<tr><td value='"+n_value+"'>"+n_name+"</td></tr>";
　　　　　　　　　　　　　　　 tablehtml+=stemp;
　　　　　　　　　　　 }
　　　　　　　　　　　 break;
　　　　　　　 }
　　　 }
　
　　　 var cDivObj= document.getElementById("oOption2");
　　　 if(cDivObj!=null)
　　　 {
　　　　　　　 cDivObj.innerHTML="<table cellsapcing='0' cellspadding='3' border='0' width='100%' id='tb_city'>"
　　　　　　　　　　　　　　　　　　　　　　　　　 + tablehtml
　　　　　　　　　　　　　　　　　　　　　　　　　 +"<table>";
　　　 }
　
　　　 //删除对象
　　　 delete(xmlDoc);
　　　 return;
}