<?xml version="1.0" encoding="utf-8"?>
<item id="0">
<item id="1">
<item id="11">
<item id="111">
</item>
<item id="112">
</item>
</item>
<item id="12">
<item id="13">
</item>
</item>
</item>
<item id="2">
</item>
<item id="3">
</item>
</item>
function creatXHR(){
if (window.ActiveXObject) return new window.ActiveXObject('Microsoft.XMLHTTP');
else if (window.XMLHttpRequest) return new window.XMLHttpRequest();
else return null;
}
function make(id, xml){
var sub = [], div = '';
$('#' + id, xml).each(function(){
div = '<div id="' + this.getAttribute('id') + '">'
$('#' + id + '>item', xml).each(function(){
div += '\n<a herf="#">' + this.getAttribute('id') + '<\/a>';
sub.push(make(this.getAttribute('id'), xml));
});
div += '\n<\/div>\n';
});
div += sub.join('\n');
return div;
}
var xhr = creatXHR();
xhr.open('GET', 'xml.xml');
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
alert(make(0, xhr.responseXML));
}
}
xhr.send(null);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>无标题文档</title>
<script type="text/javascript">
function $(sId){
return document.getElementById(sId);
}
function getSubNodes(oNode){
var aChildNodes=oNode.childNodes;
var i,nLen=aChildNodes.length;
var aSubNodes=[];
for(i=0;i<nLen;i++){
if(aChildNodes[i].tagName){
aSubNodes.push(aChildNodes[i]);
}
}
return aSubNodes;
}
function outputNode(oNode,nMargin){
var sId=oNode.getAttribute("ID");
var aSubNodes=getSubNodes(oNode);
var i,nLen=aSubNodes.length;
alert("id="+sId+",childNodesCount="+nLen);
if(nLen>0){
var oDiv,aHtml=[];
oDiv=document.createElement("div");
document.body.appendChild(oDiv);
oDiv.id="div"+sId;
oDiv.style.marginLeft=nMargin+"px";
for(i=0;i<nLen;i++){
aHtml.push(
"<a href='#'>"
+aSubNodes[i].getAttribute("ID")
+"</a> ");
outputNode(aSubNodes[i],nMargin+30);
}
oDiv.innerHTML=aHtml.join("");
}
}
window.onload=function(){
var oRoot=$("divData").getElementsByTagName("item")[0];
outputNode(oRoot,0);
}
</script>
</head>
<body>
<!--数据区开始-->
<div id="divData" style="display:none">
<item ID="0">
<item ID="1">
<item ID="11">
<item ID="111"></item>
<item ID="112"></item>
</item>
<item ID="12"></item>
<item ID="13"></item>
</item>
<item ID="2">
<item ID="21"></item>
<item ID="22"></item>
</item>
<item ID="3"></item>
</item>
</div>
<!--数据区结束-->
</body>
</html>
