javascript解析XML生成树形结构

最新推荐文章于 2023-07-13 16:55:47 发布

carroll0911

最新推荐文章于 2023-07-13 16:55:47 发布

阅读量3.4k

点赞数

分类专栏： javascript 源码文章标签： javascript xml attributes function null div

本文链接：https://blog.csdn.net/Core_Star/article/details/6284141

版权

javascript 源码专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前两天一个朋友去一家公司面试，面试题是用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.οnclick="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 " rel="nofollow"-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

carroll0911

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript解析XML生成树形结构

前两天一个朋友去一家公司面试，面试题是用javascript解析一个XML，生成树形结构，今天闲着没事就试了试。源代码：无标题页简单的实现了一下，有这个效果，有时间可以好好封装一下。
复制链接

扫一扫