javascript解析XML生成树形结构(兼容Firefox，IE9)

最新推荐文章于 2022-11-24 15:50:22 发布
最新推荐文章于 2022-11-24 15:50:22 发布
阅读量2.3k 收藏
点赞数
分类专栏： javascript 源码 文章标签： javascript firefox xml ie function attributes
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/core_star/article/details/7253929
版权


直接将源代码拷贝过来了


<!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 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("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);
                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("div"+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.ο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("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("div");
            cContainer.id=idStr;
            cContainer.style.display="none";
            parentContainer.appendChild(cContainer);
            return cContainer;
        }
        
        //单击事件
        function itemClick()
        {
            var conId=this.id.replace("span","div");
            //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">
    <div>
    </div>
    </form>
    <script language="javascript">xmlParser(xmlStr);</script>
</body>
</html>


carroll0911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
12-02
代码如下: //导入js文件 function getResult(url, ready) { var xmlHttp; var r = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //alert(isIE); var xmlstr;...
DOM的概念和简单应用：使用DOM解析XML数据
weixin_34224941的博客
05-21 243
概念：DOM是Document Object Model的简称，即文档数据模型。 Oracle公司提供了JAXP（Java API for XML Processing）来解析XML。JAXP会把XML文档转换成一个DOM树，JAXP的三个包都在JDK中。 org.w3c.dom;W3C推荐的解析文档的接口 org.xml.sax;使用SAX解析XML文档的接口 javax.xml.par...
前端-XML
weixin_45156610的博客
07-13 1683
第08天 xml 第1章 XML技术 <dog> <name>张三</name> <age>5</age> </dog> 1.1 什么是XML，作用是什么 可扩展标记语言（Extensible Markup Language ），XML是一种数据格式，类似我们前面学习的HTML，是使用标签进行内容描述的技术，与HTML不...
xml文件解析成树状结构
热门推荐
qq_17769347的博客
06-22 1万+
package com.fcar.frameworks.utils; import com.fcar.frameworks.core.GlobalVar; import com.fcar.frameworks.utils.io.EncryptedInputStream; import com.fcar.frameworks.utils.xjson.XJsonToXmlNodeParser; i
XML解析
hao_dream_xi的博客
05-24 161
XML解析 概念： Document Object Model(文档对象模型) 将HTML或XML在内存中解析成一棵树(将XML文本读入到内存，形成一棵树)。 对节点进行CRUD操作。 树有节点的概念（Node） 节点类型 文档节点 元素节点 属性节点 文本节点 注释节点 Java中配置文件的三种配置位置及读取方式 XML的主要用途： 程序之间的数据传输通讯 程序之间的数据传输通讯 PHP语言...
解析xml三种方式
最新发布
qq_61986535的博客
11-24 1614
一个dom的解析器在解析一个xml文档的时候，一次性读取整个文档，把文档中的所有元素保存在内存中的一个树结构里面，可以利用dom提供不同函数来读取或修改文档的内容和结构，也可以把修改过的内容写入到xml文件中。startElement(name,attrs)：遇到xml开始标签时调用，name是标签的名字，attrs是标签的属性，解析器：负责读取xml文件，并向时间处理器发送相应的处理事件，处理事件包括：元素开始事件和元素结束事件。注意：标签可以是开始标签，也可以是结束标签。
解析XML中的树形结构与DOM文档对象模型
09-24
主要介绍了XML中的树形结构与DOM文档对象模型,文中举了JavaScript解析DOM对象的例子,需要的朋友可以参考下
java解析xml动态生成树形菜单结构
12-04
java解析xml动态生成树形菜单结构 可以满足无限层的树形菜单，该工程的所有代码，都有详细的实例。 以及js控制树形菜单的伸展和收缩，以及全选
JavaScript递归算法生成树形菜单
10-19
主要介绍了JavaScript递归算法生成树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端解析xml
weixin_42863883的博客
10-19 1370
xml 解析 soap
js读取xml文件，生成树型结构
11-23
这是一个js读取xml文件的例子。因为ajax执行后返回的也是一个xml文件，这个例子做的就是最终生成的树形结构。
将xml解析成树状结构显示
07-28
NULL 博文链接：https://zhangqkunkun.iteye.com/blog/788828
一个非常好的js解析xml生成一个tree
07-08
完美可以把任何xml，解析成一个tree，是用js完美呈现
JS 读取 XML 生成树
01-20
使用 javascript 读取 xml 配置的内容，生成 dtree， 可用于一些配置 文件生成属性目录结构， 方便， 操作简易
xml文件以树形结构显示
11-20
将xml文档的各节点以及属性用树形控件显示，属性显示在文本框中
利用解析xml文件的方式实现多级树
qinjingkai的专栏
01-18 950
 多级树的传统作法是数据保存到数据库中，这样做的优点是可以保存的数据量大，可以用标准的sql对数据执行操作；但是这样做的缺点也是很明显的，那就是层次结构不能得到很好的体现，很不直观，维护起来比较困难；在数据量不是很大的情况下（如管理后台左边的导航栏数据），我比较喜欢把数据保存在 xml文件中，节点间的层次结构得到很好的体现，同时在增加一个节点的时候不再要求一定要同时该节点的父亲节点的信息；系统的结...
前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的值
咖啡壶的博客
07-12 4561
前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的值
JS读取XML字符串形成树
10-10
JS读取XML字符串形成树，针对数据量大的XML字符串读取与树结构拼接
js从xml读取数据生成树形控件
11-15
js从xml读取数据生成树形控件，并带有checkbox控件，可以得到节点值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值