javascript解析XML生成树形结构

前两天一个朋友去一家公司面试，面试题是用javascript解析一个XML，生成树形结构，今天闲着没事就试了试。

源代码：

•  
  • <html xmlns=" http://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=0;
            var blankSize=20;
           
            var idIndex=0;
            function xmlParser(xmlStr)
            {
                var childs=null;
                var root=null;
                var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.loadXML(xmlStr);
                root=xmlDoc.documentElement;
                //childs=root.getChild
                //alert(root.nodeName);
                childs=root.childNodes;
                //alert(document.body);
                var topDiv=document.createElement("div");
                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);
                   
                    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++;
                        htmlnode=createItem(node_value,"span"+idIndex,container);
                        htmlnode.style.paddingLeft=bl_times*blankSize;
                        //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++;
                        htmlnode=createItem(node_value,"span"+idIndex,container);
                        htmlnode.style.paddingLeft=bl_times*blankSize;
                        //alert(node_value+"-"+bl_times);
                        var cContainer=createChildContainer("div"+idIndex,container);
                        cContainer.style.paddingLeft=bl_times*blankSize;
                        Integration_InterceptCellEvent("span"+idIndex, "onclick", itemClick);
                        //htmlnode.onclick="itemClick('"+"div"+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("a");
                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("div");
                cContainer.id=idStr;
                cContainer.style.display="none";
                parentContainer.appendChild(cContainer);
                return cContainer;
            }
           
            //单击事件
            function itemClick()
            {
                var conId=this.id.replace("span","div")
                var container=document.getElementById(conId);
                if(container)
                {
                    if(container.style.display=="block")
                        container.style.display="none";
                    else
                        container.style.display="block";
                }
                //alert(conId);
            }
           
           
            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>');
                }
            }
  •     </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        </div>
        </form>
        <script language="javascript">xmlParser(xmlStr);</script>
    </body>
    </html>
    
        
       
    
    
    
    简单的实现了一下，有这个效果，有时间可以好好封装一下。
• 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">