直接將源代碼拷貝過來瞭
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" https://www.w3.org/1999/xhtml " >
<head runat="server">
<title>無標題頁</title>
<script language="javascript" charset="GB2312" type="text/javascript">
var xmlStr='<?xml version="1.0" encoding="utf-8"?><xmlRoot value="root"><child value="c1"><child_1>c11</child_1></child><child>c2</child></xmlRoot>';
var blank=". ";
var blankTimes=1;
var blankSize=40;
var idIndex=0;
//兼容IE和Firefox的XML解析方法
function loadXML(xmlStr)
{
if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判斷是否是非ie瀏覽器
var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
xmlDoc.async = false;
xmlDoc.loadXML(xmlStr); //loadXML方法載入xml字符串
break;
}catch(e){
}
}
}
//支持Mozilla瀏覽器
else if(window.DOMParser && document.implementation && document.implementation.createDocument){
try{
domParser = new DOMParser();
xmlDoc = domParser.parseFromString(xmlStr,"text/xml");
}catch(e){
}
}
else{
return null;
}
return xmlDoc;
}
function xmlParser(xmlStr)
{
var childs=null;
var root=null;
var xmlDoc=loadXML(xmlStr);
root=xmlDoc.documentElement;
//childs=root.getChild
//alert(root.nodeName);
childs=root.childNodes;
//alert(document.body);
var topDiv=document.createElement("p");
document.body.appendChild(topDiv);
//alert(topDiv);
dealWithNode(root,0,topDiv);
}
function dealWithNode(node,blankTimes,container)
{
var children=null;
var childCount=0;
var isLeaf=false;
var htmlnode=null;
var textnode=null;
var bl_times=blankTimes;
var bl_str="";
var node_value="";
// for(var bl=0;bl<bl_times;bl++)
// {
// bl_str=bl_str+blank;
// }
if(node)
{
isLeaf=isLeafNode(node);
var str="";
var spaceLength=0;
if(idIndex>0)
{
str=getSpaceString(4);
}
if(bl_times>0)
{
spaceLength=(bl_times-1)*blankSize;
}
if(isLeaf)
{
if(node.nodeType==3)
{
node_value=node.nodeValue;
}
else
{
node_value=node.firstChild.nodeValue;
}
// htmlnode=document.createElement("span");
// textnode=document.createTextNode(bl_str+node_value);
// htmlnode.appendChild(textnode);
// document.body.appendChild(htmlnode);
// document.body.appendChild(document.createElement("<br>"));
//alert(container);
idIndex++;
node_value=str+node_value;
htmlnode=createItem(node_value,"span"+idIndex,container);
htmlnode.style.paddingLeft=spaceLength+'px';
//alert(node_value+"-"+bl_times);
//alert(node.firstChild.nodeValue);
}
else
{
node_value=getAttributValue(node,"value");
// htmlnode=document.createElement("span");
// textnode=document.createTextNode(bl_str+node_value);
// htmlnode.appendChild(textnode);
// document.body.appendChild(htmlnode);
// document.body.appendChild(document.createElement("<br>"));
idIndex++;
node_value=str+node_value;
htmlnode=createItem(node_value,"span"+idIndex,container);
htmlnode.style.paddingLeft=spaceLength+'px';
//alert(node_value+"-"+bl_times);
var cContainer=createChildContainer("p"+idIndex,container);
cContainer.style.paddingLeft=bl_times*blankSize;
//Integration_InterceptCellEvent("span"+idIndex, "onclick", itemClick);
//var obj=document.getElementById("span"+idIndex);
myAttachEvent(htmlnode,'click',itemClick);
//htmlnode.onclick="itemClick('"+"p"+idIndex+"');";
//alert(htmlnode.onclick);
children=node.childNodes;
bl_times+=1;
if(children&&children.length>0)
{
for(var i=0;i<children.length;i++)
{
dealWithNode(children[i],bl_times,cContainer);
}
}
}
}
}
//判斷node節點是否是葉子節點
function isLeafNode(node)
{
var children=null;
if(node)
{
if(node.nodeType==3)
{
return true;
}
else
{
children=node.childNodes;
if(children.length==1&&children[0].nodeType==3)
{
return true;
}
else
{
return false;
}
}
}
return true;
}
//根據屬性名 獲取node節點的attrName屬性的屬性值
function getAttributValue(node,attrName)
{
var attributes=null;
var attr=null;
if(node)
{
attributes=node.attributes;
if(attributes&&attributes.length>0)
{
for(var attrI=0;attrI<attributes.length;attrI++)
{
attr=attributes[attrI];
if(attr&&attr.nodeName==attrName)
{
return attr.nodeValue;
}
}
}
}
return null;
}
//創建項
function createItem(itemText,idStr,parentContainer)
{
var htmlnode=null;
var textnode=null;
htmlnode=document.createElement("span");
htmlnode.id=idStr;
htmlnode.href="#";
//htmlnode.style.paddingLeft="200";
//htmlnode.expanded="fales";
textnode=document.createTextNode(itemText);
htmlnode.appendChild(textnode);
//alert(parentContainer);
parentContainer.appendChild(htmlnode);
parentContainer.appendChild(document.createElement("br"));
return htmlnode;
}
//創建非葉子節點的子節點的容器
function createChildContainer(idStr,parentContainer)
{
var cContainer=null;
cContainer=document.createElement("p");
cContainer.id=idStr;
cContainer.style.display="none";
parentContainer.appendChild(cContainer);
return cContainer;
}
//單擊事件
function itemClick()
{
var conId=this.id.replace("span","p");
//alert(conId);
var container=document.getElementById(conId);
if(container)
{
if(container.style.display=="block")
container.style.display="none";
else
container.style.display="block";
}
//alert(conId);
}
var myAttachEvent = function(obj, evt, fn){
if (obj.addEventListener)
obj.addEventListener(evt, fn, false);
else if (obj.attachEvent)
obj.attachEvent("on" + evt, fn);
}
function Integration_InterceptCellEvent(id, evt, func)
{
if (func.constructor == Function)
{
document.write('<scr' + 'ipt for="' + id + '" event="' + evt + '">'
+ 'Array.prototype.push.call(arguments, "' + evt + '");'
+ func.toString().match(/\s*Function\s+(\S*)\s*\(/i)[1]
+ '.apply(this, arguments);'
+ '</sc' + 'ript>');
}
}
function getSpaceString(strlength)
{
var str="|";
for(var strIndex=0;strIndex<strlength;strIndex++)
{
str+="-";
}
return str;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
</p>
</form>
<script language="javascript">xmlParser(xmlStr);</script>
</body>
</html>
摘自 Core_Star的專欄