JS读取XML文件

最新推荐文章于 2022-06-26 13:44:43 发布
最新推荐文章于 2022-06-26 13:44:43 发布
阅读量629 收藏
点赞数
分类专栏： Html

通俗的来说互联网的作用就是跟数据打交道：存储、传输、显示、处理。XML作为跨平台的数据存储方式，其地位自然不用多说。

       今天硬着头皮在W3上看了一点儿，记录如下。

       先粘一段代码，免得以后忘了。

[html]  view plain copy
  1. <%@page pageEncoding="UTF-8"%>  
  2. <html>  
  3. <!--   
  4.   - Author(s): wangcc  
  5.   - Date: 2012-05-25 16:07:14  
  6.   - Description:  
  7. -->  
  8. <head>  
  9. <title>测试页</title>  
  10. <script type="text/javascript">  
  11.     var xmlDoc = null;  
  12.     /*将xml文档加入到解析器中*/  
  13.     if (window.ActiveXObject)  
  14.     {  
  15.           // code for IE  
  16.           xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  
  17.     }  
  18.     else if (document.implementation.createDocument)  
  19.     {  
  20.           // code for Firefox, Mozilla, Opera, etc.  
  21.           xmlDoc=document.implementation.createDocument("","",null);  
  22.     }  
  23.     else  
  24.     {  
  25.           alert('Your browser cannot handle this script');  
  26.     }  
  27.     xmlDoc.async=false;  
  28.     xmlDoc.load("cd_catalog.xml");  
  29.     //得到所有CD节点  
  30.     var x = xmlDoc.getElementsByTagName("CD");  
  31. </script>  
  32.   
  33. </head>  
  34. <body ondblclick="display();">  
  35. <div id="show">点击表格显示详情:</div>  
  36. <script type="text/javascript">  
  37.         //输出表格  
  38.         document.write("<table border='1'>");  
  39.         for (var i = 0; i < x.length; ++i)  
  40.         {  
  41.             document.write("<tr id='tr" + i + "' onclick='disDetail(" + i + ")'>");  
  42.             //输出演唱者  
  43.             document.write("<td>"   
  44.                 + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue   
  45.                 +  "</td>");  
  46.             //输出专辑名称  
  47.             document.write("<td>"   
  48.                 + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue   
  49.                 +  "</td>");  
  50.             document.write("</tr>");  
  51.         }  
  52.         document.write("</table>");  
  53. </script>  
  54.   
  55. </body>  
  56.   
  57. <script type="text/javascript">  
  58.   
  59.     /*显示对应行的CD详情*/  
  60.     function disDetail(i)  
  61.     {  
  62.         /*读取CD节点各个属性值*/  
  63.         var artist = "artist: " +  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;  
  64.         var bulm = "bulm: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;  
  65.         var country = "country: " + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;  
  66.         var company = "company: " + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue;  
  67.         var price = "price: " + x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue;  
  68.         var year = "year: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;  
  69.         /*将读取的内容显示到DIV中*/  
  70.         document.getElementById("show").innerHTML = artist + "<br>" + bulm + "<br>" + country + "<br>" + company + "<br>" +  
  71.         price + "<br>" + year + "<br>";  
  72.         /*点击一行变化颜色*/  
  73.         var trChange = document.getElementById("tr" + i);  
  74.         if(trChange.style.backgroundColor == 'blue')  
  75.         {  
  76.             trChange.style.backgroundColor = document.bgColor;  
  77.         }  
  78.         else  
  79.         {  
  80.             trChange.style.backgroundColor = "blue";  
  81.         }  
  82.     }  
  83. </script>  
  84.   
  85. </html>  

下面是XML文件的节点示例

[html]  view plain copy
  1.  <?xml version="1.0" encoding="ISO-8859-1" ?>   
  2. <!--  Edited with XML Spy v2007 (http://www.altova.com)  
  3.  -->   
  4. <CATALOG>  
  5. <CD>  
  6.  <TITLE>Empire Burlesque</TITLE>   
  7.  <ARTIST>Bob Dylan</ARTIST>   
  8.  <COUNTRY>USA</COUNTRY>   
  9.  <COMPANY>Columbia</COMPANY>   
  10.  <PRICE>10.90</PRICE>   
  11.  <YEAR>1985</YEAR>   
  12.  </CD>  
  13. <CD>  
  14.  </CATALOG>  

       关键的知识点其实今天没有学到，就是XML DOM。通过它对XML文件的操作（读取、修改、新增节点）才是要点所在。这个任务留待明天吧。

       将XML文件加载到解析器中去的代码可以重复使用，并且做到了浏览器的兼容性验证，十分类似xmlhttprequest那段。

转自：http://blog.csdn.net/wkupaochuan/article/details/7656904

nick848
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js读取xml文件并获取文件内容
03-21
js读取xml文件并获取文件内容
Nest.js 处理 XML 请求及响应
xionghnly的博客
04-11 3928
0x01 背景笔者最近在使用Nest.js开发服务端程序，遇到了一些需要处理 XML 的场景，搜遍了网络上发现没有比较优雅的方式，于是摸索后将过程整理出来。0x02 研究Google 搜索nest handle xml的第一个结果是一篇中文文章：Nest 中处理 XML 类型的请求与响应但是照猫画虎了一番，发现 TS 总是报错，可能是body-parser-xm...
js请求解析xml
独行僧
10-25 1609
xml数据<?xml version="1.0" encoding="utf-8"?> <table> <node name="node1" id="0"> <text title="test" content="详情" /> <img name="image" /> <pic name="test.jpg" /> <pic
nestjs[一例看懂中间件、守卫、管道、异常过滤器、拦截器]
墨水白云的博客
01-14 1万+
看懂nestjs中间件、守卫、管道、异常过滤器、拦截器
nestjs[中间件middleware的使用]
墨水白云的博客
01-10 1880
接收一个接口请求，如：‘/xxx’，然后我要获取请求参数，但是在获取请求参数之前我要对参数内容做一下改变呢？比如：获取xml参数的时候，express是不支持application/xml这个格式的。因此我可以用到中间件对的逻辑做下处理。
Nestjs入门和环境搭建
Wang的专栏
06-26 1438
1 ) 环境准备操作系统：支持 macOS，Linux，Windows 运行环境：Nodejs 建议选择 LTS 版本，建议使用最新版本2 ） 安装 Nest 脚手架以及使用 CLI 创建项目我们推荐直接使用脚手架，只需几条简单指令，即可快速生成项目:启动项目:...............
JS读取XML文件示例代码
10-26
读取XML文件的方法有很多，在本文为大家详细介绍下使用js是如何做到的，感兴趣的朋友可以参考下本
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
10-22
主要介绍了JS读取XML文件数据并以table形式显示数据的方法,涉及javascript针对xml节点操作及HTML表格操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
使用JS读取XML文件的方法
11-28
第一类，ie祖宗： js 提供用于创建 Automation对象的方法，new ActiveXObject(“Microsoft.XMLDOM”) ； 第二类：firefox，opera：用构造函数 DOMParser()实例化DOMParser对象，解析xml文本，并返回xml Document对象...
JavaScript操作XML文件(1)读取
java619
11-07 1225
/***************************************Author:Java619*Time:2006-11-07**************************************/假设我们现在要读取下面的 info.xml 文件 xml version="1.0" encoding="gb2312"?>root>  data id="1">    
利用js读取xml文件
技术分享博客
04-21 5472
js读取xml文件XML文件新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 XML文件 新的改变 我们对Mar...
JavaScript实现解析xml文件数据
热门推荐
m0_70015558的博客
05-26 1万+
​ 用js来解析xml文件，xml格式的数据很普遍，特别是一些老项目普遍都用xml格式的数据。在ajax里有个responseXML就返回的是xml格式的数据，下面是js如何解析xml文件，获得里面的数据。话不多说，直接上传。 ​.........
js读取xml文件
xclsky的博客
12-27 1542
1,js也能读取xml文件内容，通过ActiveXObject来实现、 如：var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");     xmlDoc.async="false";     xmlDoc.load("xml/NewFile.xml");     var root=xmlDoc.documentElement;     aler
JS读取XML文件中的内容
s01896的博客
04-19 1407
1.使用方法 var tHdnBGM = GetRoleByXML("104","Role-Site","BG_Mananger"); //返回值为 H00001 var tHdnBGM2 = GetRoleByXMLValue("104","Role-Site","BG_Mananger"); //返回值为 H00001_张那 2.xml文件内容 <?xml version="1.0" encoding="UTF-8"?> <!-- 多值以 ":" 分隔 -->
脚本操作xml
chxzly1981的专栏
10-12 2084
14.1  读取XML文件随着XML的流行，JavaScript开发者也迫切希望在客户端Web开发中应用XML，本节将介绍如何通过XML DOM对象和XMLHttpRequest对象读取XML文件。实例350   使用XML DOM对象读取XML文件实例说明 在制作网站时，有时需要在页面上显示商品或其他信息的列表，这时，如果是动态网站可以将列表信息保存到数据库中，但如果是静态网站，
JS读写XML文件
dean0120的专栏
12-19 599
以下代码是在引用GOOGLE地图做地理系统的时候写的一小段。 详细情况 ，请仔细读读吧，呵呵。 JavaScript     //     //嵌入CDATA段可以防止不兼容Javacript的浏览器不产生错误信息     //增加正则表达式      String.prototype.getQueryString = function(name) {
JS读取XML数据
欢迎光临Andy511823558的空间
04-22 778
XMl数据格式如下： 刘亦菲 MingXing/LiuYiFei.htm 7A9D4B 蔡依林 MingXing/CaiYiLin.htm FD0000 张娜拉 MingXing/ZhangNaLa.htm 7A9D4B 张韶涵 MingXiang/ZhangShaoHan.htm 0000FF 张靓颖 MingXin
JavaScript读取XML文件
a_dev的专栏
03-01 411
背景：使用ArcGIS API for JavaScript做地图开发。后端JS代码中需要获取前端HTML中的各组件ID。为使前后端分离，现使用XML文件存储HTML文件中的各组件ID配对（即一个InnerId对应一个OuterId，InnerId供JS代码里调用，OuterId供前端开发使用）。 写一个方法去根据InnerId获取对应的OuterId： function getByI
js读取配置xml文件
最新发布
05-22
在 JavaScript 中，可以通过 XMLHttpRequest 对象来读取 XML 文件。以下是一个简单的示例代码： ```javascript var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值