javascript解析XML生成樹形結構(兼容Firefox,IE9) – Javascript教程_JS教程_技術文章 – 程式設計聯盟

直接將源代碼拷貝過來瞭

<!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的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。