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

JavaScript:从浏览器脚本到全栈生态核心的演进与实战解析 编程语言作为软件开发的基石,其设计哲学与运行时特性决定了应用边界。以解释执行、动态类型为核心的高级语言,通过原型继承和函数式特性支持多范式开发,在事件循环与非阻塞I/O模型加持下,能高效处理并发任务,技术价值在于实现高响应性的用户体验与服务器端高性能。这一特性使其从最初的网页交互脚本,逐步拓展至构建单页面应用、服务器端API及跨平台桌面软件等全栈场景。以JavaScript为例,其基于V8引擎的Node.js运行时将语言能力延伸至后端,结合React等框架形成完整生态,并通过ECMAScript标准持续演进 阅读详情


直接将源代码拷贝过来了


<!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.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("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>


企业级OA系统架构解析:从经典三层到现代微服务演进 企业级应用开发中,三层架构是经典的分层设计模式,通过表现层、业务逻辑层和数据访问层的分离,实现了关注点分离和代码复用。其核心原理在于通过接口抽象降低层间耦合,使系统更易于维护和扩展。这种架构模式在OA、ERP等管理系统中具有重要技术价值,能够有效支撑权限管理、工作流审批等复杂业务场景。以企业OA系统为例,基于ASP.NET和SQL Server的技术栈实现了RBAC权限模型和状态机驱动的工作流引擎,通过数据库表结构设计(如User、Role、Permission表)和事务管理保证了业务一致性。随着技术发展, 阅读详情

相关推荐

js读取xml文件,生成树型结构

这是一个js读取xml文件的例子。因为ajax执行后返回的也是一个xml文件,这个例子做的就是最终生成的树形结构。

DOM的概念和简单应用:使用DOM解析XML数据

概念: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...

weixin_34224941的博客 356

将xml解析成树状结构显示

NULL 博文链接:https://zhangqkunkun.iteye.com/blog/788828

前端-XML

第08天 xml 第1章 XML技术 <dog> <name>张三</name> <age>5</age> </dog> 1.1 什么是XML,作用是什么 可扩展标记语言(Extensible Markup Language ),XML是一种数据格式,类似我们前面学习的HTML,是使用标签进行内容描述的技术,与HTML不...

weixin_45156610的博客 2223

一个非常好的js解析xml生成一个tree

完美可以把任何xml,解析成一个tree,是用js完美呈现

解析XML文档 实现树结构实例

开发环境为VC,基于对话框,用msxml组件解析XML文档,运用递归循环的方法实现树结构,支持中文,可以运行的一个实例。

xml文件解析成树状结构

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

qq_17769347的博客 1万+

xml文件以树形结构显示

将xml文档的各节点以及属性用树形控件显示,属性显示在文本框中

前端解析xml

xml 解析 soap

weixin_42863883的博客 1579

ROS2零拷贝避坑指南:Fast DDS共享内存配置常见问题与排查方法

本文深入解析ROS2 Humble中Fast DDS的零拷贝机制,提供共享内存配置的常见问题排查方法。从环境变量设置、XML配置文件到运行时诊断工具,全面指导开发者高效实现进程间数据传输优化,避免低效拷贝问题。特别针对/dev/shm无文件生成等典型场景给出解决方案。

weixin_30379531的博客 478

debian mirrors 镜像源 riscv 64 赛昉 星光 starfive vf2 InRelease‘ doesn‘t support architecture ‘riscv64‘

debian mirrors 镜像 riscv 64 赛昉 星光2 starfive vf2 InRelease' doesn't support architecture 'riscv64'

qq_29758759的博客 1259

前端操作xml,从本地获取xml格式的文件,并且解析xml文件,拿到需要的值

前端操作xml,从本地获取xml格式的文件,并且解析xml文件,拿到需要的值

咖啡壶的博客 5981

Qt实战:用QTreeView+QStandardItemModel实现多级多列文件浏览器(附完整代码)

本文深入探讨了使用Qt的QTreeView与QStandardItemModel构建多级多列文件浏览器的完整实践。通过分析模型/视图框架的优势,详细演示了从基础框架搭建、模拟数据填充,到对接真实文件系统实现懒加载的全过程。文章还涵盖了自定义委托、多列排序、右键菜单等高级定制技巧,并提供了性能优化建议和完整的代码示例,帮助开发者打造功能强大且高效的工业级文件管理界面。

weixin_29021291的博客 424

DOM和BOM

DOM 文档对象模型:一种处理html和xml文件的标准API。 解析:将html或xml文档转化为DOM树的过程 DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容document 1、setAttribute设置类名 element.setAttribute('className','newClassName') // 只ie有效 element.className = 'newClassName' //所有 2、F

Mikon_0703 139

【PADS-开发指南】

馒头破戒大师

sinat_23896491的博客 3225

LMK04821时钟芯片SPI配置避坑指南:从寄存器读写到频率校准全流程

本文详细解析了LMK04821时钟芯片的SPI配置全流程,涵盖寄存器读写、频率校准及JESD204B系统设计中的关键技巧。通过实战案例和避坑指南,帮助工程师高效解决时钟输出异常、同步失败等常见问题,提升高速数据采集系统的时钟稳定性。

weixin_29172963的博客 159

浅析前端页面渲染机制

一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家,狂戳这里即可获取由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)一个好的心态和一个坚持的心很重要。

sgegv的博客 870

STM32与AD7606的SPI通信优化:提升高精度数据采集效率

本文深入探讨了STM32与AD7606的SPI通信优化策略,旨在提升高精度数据采集系统的效率与稳定性。文章从硬件连接、电源去耦、PCB布局等基础环节入手,详细解析了软件驱动中SPI模式配置、DMA应用及精准时序控制等关键优化技术,并提出了系统级的性能提升方案,帮助开发者解决高速采样下的数据跳动、效率瓶颈等实际问题。

weixin_29192211的博客 393

React面试题笔记(一)

React面试题笔记(一)

qq_42750608的博客 1249

具身智能:从理论突破到场景落地的全解析

具身智能(Embodied Intelligence)是人工智能与机器人学深度融合的前沿领域,其核心在于通过物理实体与环境的动态交互实现智能行为。区别于传统 AI 的 “离身性”(如语音助手仅依赖数据输入),具身智能强调 “智能体通过身体感知世界并反作用于环境”,形成 “感知 - 决策 - 行动” 的闭环。例如,能自主避障的配送机器人、可精准抓取异形物体的机械臂,均通过传感器网络与环境实时互动,在试错中优化行为策略。

LeeKumaの技术Note 2683

电机控制个人学习路线及专业书籍资源分享

个人学习电机控制的学习路线,和相关专业书的电子文档分享

weixin_45182459的博客 9915

解析xml三种方式

一个dom的解析器在解析一个xml文档的时候,一次性读取整个文档,把文档中的所有元素保存在内存中的一个树结构里面,可以利用dom提供不同函数来读取或修改文档的内容和结构,也可以把修改过的内容写入到xml文件中。startElement(name,attrs):遇到xml开始标签时调用,name是标签的名字,attrs是标签的属性,解析器:负责读取xml文件,并向时间处理器发送相应的处理事件,处理事件包括:元素开始事件和元素结束事件。注意:标签可以是开始标签,也可以是结束标签。

qq_61986535的博客 1888

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

XML解析

XML解析 概念: Document Object Model(文档对象模型) 将HTML或XML在内存中解析成一棵树(将XML文本读入到内存,形成一棵树)。 对节点进行CRUD操作。 树有节点的概念(Node) 节点类型 文档节点 元素节点 属性节点 文本节点 注释节点 Java中配置文件的三种配置位置及读取方式 XML的主要用途: 程序之间的数据传输通讯 程序之间的数据传输通讯 PHP语言...

hao_dream_xi的博客 279

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

利用解析xml文件的方式实现多级树

 多级树的传统作法是数据保存到数据库中,这样做的优点是可以保存的数据量大,可以用标准的sql对数据执行操作;但是这样做的缺点也是很明显的,那就是层次结构不能得到很好的体现,很不直观,维护起来比较困难;在数据量不是很大的情况下(如管理后台左边的导航栏数据),我比较喜欢把数据保存在 xml文件中,节点间的层次结构得到很好的体现,同时在增加一个节点的时候不再要求一定要同时该节点的父亲节点的信息;系统的结...

qinjingkai的专栏 1039

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

JS读取XML文件形成树结构

某日在做根据后台返回的XML字符串形成树状菜单,因为之前并没有怎么操作过XML文件,所以去求助了一下百度,奈何怎么也找不到符合我要求的答案。最后退而求其次,找到了根据XML文件形成树状菜单的示例,不过有蛮久过去了,已经找不到原来的文章地址在哪了,所以自己备忘一下。         主要是一个JS插件,我直接附上代码吧。 /* JavaScript Document */ /*

qq_34307209的博客 3058
上一篇: JS打印相关内容
下一篇: Javascript 将table数据导出到Excel
carroll0911
博客等级 码龄17年 27粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值