JS解析XML文件和XML字符串详解-XML/RSS教程-PHP中文网

首页

后端开发

XML/RSS教程

JS解析XML文件和XML字符串详解

高洛峰

Dec 19, 2016 pm 04:12 PM

JS解析XML文件

<script type=&#39;text/javascript&#39;>
loadXML = function(xmlFile){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.ActiveXObject){
var xmlDomVersions = [&#39;MSXML.2.DOMDocument.6.0&#39;,&#39;MSXML.2.DOMDocument.3.0&#39;,&#39;Microsoft.XMLDOM&#39;];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
break;
}catch(e){
}
}
}
//支持Mozilla浏览器
else if(document.implementation && document.implementation.createDocument){
try{
/* document.implementation.createDocument(&#39;&#39;,&#39;&#39;,null); 方法的三个参数说明
* 第一个参数是包含文档所使用的命名空间URI的字符串；
* 第二个参数是包含文档根元素名称的字符串；
* 第三个参数是要创建的文档类型（也称为doctype）
*/
xmlDoc = document.implementation.createDocument(&#39;&#39;,&#39;&#39;,null);
}catch(e){
}
}
else{
return null;
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
</script>

登录后复制

JS解析XML字符串

<script type=&#39;text/javascript&#39;>
loadXML = function(xmlString){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判断是否是非ie浏览器
var xmlDomVersions = [&#39;MSXML.2.DOMDocument.6.0&#39;,&#39;MSXML.2.DOMDocument.3.0&#39;,&#39;Microsoft.XMLDOM&#39;];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
xmlDoc.async = false;
xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
break;
}catch(e){
}
}
}
//支持Mozilla浏览器
else if(window.DOMParser && document.implementation && document.implementation.createDocument){
try{
/* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
* 要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法
* parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
* 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。
*/
domParser = new DOMParser();
xmlDoc = domParser.parseFromString(xmlString, &#39;text/xml&#39;);
}catch(e){
}
}
else{
return null;
}
return xmlDoc;
}
</script>

登录后复制

测试XML

<?xml version="1.0" encoding="utf-8" ?>
<DongFang>
<Company>
<cNname>1</cNname>
<cIP>1</cIP>
</Company>
<Company>
<cNname>2</cNname>
<cIP>2</cIP>
</Company>
<Company>
<cNname>3</cNname>
<cIP>3</cIP>
</Company>
<Company>
<cNname>4</cNname>
<cIP>4</cIP>
</Company>
<Company>
<cNname>5</cNname>
<cIP>5</cIP>
</Company>
<Company>
<cNname>6</cNname>
<cIP>6</cIP>
</Company>
</DongFang>

登录后复制

使用方法

var xmldoc=loadXML(text.xml)
var elements = xmlDoc.getElementsByTagName("Company");
for (var i = 0; i < elements.length; i++) {
var name = elements[i].getElementsByTagName("cNname")[0].firstChild.nodeValue;
var ip = elements[i].getElementsByTagName("cIP")[0].firstChild.nodeValue;
}

登录后复制

以上方法适合IE，下面我们来探讨下IE和火狐浏览器下解析XML的问题

分别针对ie和火狐分别作了对xml文档和xml字符串的解析，所有代码都注释掉了，想看哪部分功能，
去掉注释就可以了。

至于在ajax环境下解析xml，其实原理是一样的，只不过放在了ajax里，还是要对返回的xml进行解析。

<script> 
//解析xml文档///////////////////////////////////////////////////// 
var xmlDoc=null; 
 
//支持IE浏览器 
if(window.ActiveXObject){ 
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  
} 
//支持Mozilla浏览器 
else if(document.implementation && document.implementation.createDocument){ 
  xmlDoc = document.implementation.createDocument(&#39;&#39;,&#39;&#39;,null); 
} 
else{ 
 alert("here"); 
} 
if(xmlDoc!=null){ 
  xmlDoc.async = false; 
  xmlDoc.load("house.xml"); 
} 
 
//ie和火狐不仅解析器不一样，解析过程也不一样。如下; 
//ie解析xml文档 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居 
 
//层层遍历解析childNodes[1] 
//alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//弹出200万 
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万 
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居 
 
//还可以用item(i)进行遍历 
//var nodes=xmlDoc.documentElement.childNodes; 
//alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出150万 
//alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出一室三居 
 
//火狐解析xml文档 
//火狐浏览器和ie解析xml不一样节点的值用textContent。 
//并且他会在有的层次child节点前后都加上"\n"换行符。（这个搞不清楚为什么，用firebug调试的时候就是这个样子，所以写过的代码最好测试一下，换个环境就不对了） 
//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。 
//第3个节点是"\n",第4个节点才是真正的第二个节点。 
//层层获取解析childNodes[0] 
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//弹出150万 
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//弹出一室三居 
 
//直接获取节点名解析getElementsByTagName("address") 
//alert(xmlDoc.getElementsByTagName("address")[0].textContent);//弹出150万 一室三居 200万 300万 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//弹出150万 一室三居 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//弹出150万 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//弹出一室三居 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//弹出200万  
 
//火狐也可以用item(1)函数遍历，注意也是有的层次节点前后都加了节点"\n"。 
//第一个节点是item(1)，第二个节点是item(3)，第三个节点是item(5) 
//item(1)函数遍历解析 
//var nodes=xmlDoc.documentElement.childNodes; 
//alert(nodes.item(1).textContent); //弹出150万 一室三居 
//alert(nodes.item(1).childNodes.item(1).textContent); //弹出150万  
//alert(nodes.item(1).childNodes.item(3).textContent); //一室三居  
 
//解析xml字符串///////////////////////////////////////////////////////////////////////// 
var str="<car>"+ 
"<brand><price>50万</price><pattern>A6</pattern></brand>"+ 
"<brand><price>65万</price><pattern>A8</pattern></brand>"+ 
"<brand><price>17万</price></brand>"+ 
"</car>"; 
  
//跨浏览器，ie和火狐解析xml使用的解析器是不一样的。 
var xmlStrDoc=null; 
if (window.DOMParser){// Mozilla Explorer 
 parser=new DOMParser(); 
 xmlStrDoc=parser.parseFromString(str,"text/xml"); 
}else{// Internet Explorer 
 xmlStrDoc=new ActiveXObject("Microsoft.XMLDOM"); 
 xmlStrDoc.async="false"; 
 xmlStrDoc.loadXML(str); 
} 
 
//ie解析xml字符串 
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出50万 
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出A6 
  
//还可以用item(i)进行遍历 
//var strNodes=xmlStrDoc.documentElement.childNodes; 
//alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出50万 
//alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出A6 
  
//火狐解析xml字符串 
//火狐浏览器和ie解析xml不一样节点的值用textContent。 
//并且他会在有的层次child节点前后都加上"\n"换行符。 
//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。 
//第3个节点是"\n",第4个节点才是真正的第二个节点。 
//alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//弹出65万 A8 
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8 
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//弹出65万 
  
//火狐也可以用item(1)函数遍历，注意也是有的层次节点前后都加了节点"\n"。 
//第一个节点是item(1)，第二个节点是item(3)，第三个节点是item(5) 
//var nodes=xmlStrDoc.documentElement.childNodes; 
//alert(nodes.item(1).textContent); //弹出65万 A8 
//alert(nodes.item(1).childNodes.item(0).textContent); //弹出65万  
//alert(nodes.item(1).childNodes.item(1).textContent); //弹出A8  
  
</script>

登录后复制

其中xml每个节点所在层次是最烦人的问题，只能一次次去试，只要出来一个正确的，
就很好确定节点的层次关系了，或者debug一下。
感觉这方面json还是更好阅读和理解。这个解析太费劲了！

文档house.xml内容如下：

<?xml version="1.0" encoding="utf-8" ?>  
<address> 
  <city name="北京"> 
    <price>150万</price> 
    <type>一室三居</type> 
  </city> 
  <city name="上海"> 
    <price>200万 </price> 
  </city> 
  <city name="杭州"> 
    <price>230万</price> 
  </city> 
  <city name="南京"></city> 
</address>

登录后复制

更多JS解析XML文件和XML字符串详解相关文章请关注PHP中文网！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7487

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

手机XML转PDF，转换速度快吗？ Apr 02, 2025 pm 10:09 PM

手机XML转PDF的速度取决于以下因素：XML结构的复杂性手机硬件配置转换方法（库、算法）代码质量优化手段（选择高效库、优化算法、缓存数据、利用多线程）总体而言，没有绝对的答案，需要根据具体情况进行优化。

怎么在手机上把XML文件转换为PDF？ Apr 02, 2025 pm 10:12 PM

不可能直接在手机上用单一应用完成 XML 到 PDF 的转换。需要使用云端服务，通过两步走的方式实现：1. 在云端转换 XML 为 PDF，2. 在手机端访问或下载转换后的 PDF 文件。

手机上如何将XML转换成PDF？ Apr 02, 2025 pm 10:18 PM

直接在手机上将XML转换为PDF并不容易，但可以借助云端服务实现。推荐使用轻量级手机App上传XML文件并接收生成的PDF，配合云端API进行转换。云端API使用无服务器计算服务，选择合适的平台至关重要。处理XML解析和PDF生成时需要考虑复杂性、错误处理、安全性和优化策略。整个过程需要前端App与后端API协同工作，需要对多种技术有所了解。

xml格式化工具推荐 Apr 02, 2025 pm 09:03 PM

XML格式化工具可以将代码按照规则排版，提高可读性和理解性。选择工具时，要注意自定义能力、对特殊情况的处理、性能和易用性。常用的工具类型包括在线工具、IDE插件和命令行工具。

有什么手机APP可以将XML转换成PDF？ Apr 02, 2025 pm 08:54 PM

无法找到一款将 XML 直接转换为 PDF 的应用程序，因为它们是两种根本不同的格式。XML 用于存储数据，而 PDF 用于显示文档。要完成转换，可以使用编程语言和库，例如 Python 和 ReportLab，来解析 XML 数据并生成 PDF 文档。

xml格式怎么打开 Apr 02, 2025 pm 09:00 PM

用大多数文本编辑器即可打开XML文件；若需更直观的树状展示，可使用 XML 编辑器，如 Oxygen XML Editor 或 XMLSpy；在程序中处理 XML 数据则需使用编程语言（如 Python）与 XML 库（如 xml.etree.ElementTree）来解析。

web.xml怎么打开 Apr 03, 2025 am 06:51 AM

要打开 web.xml 文件，可以使用以下方法：使用文本编辑器（如记事本或 TextEdit）使用集成开发环境（如 Eclipse 或 NetBeans）使用命令行编辑命令（Windows：notepad web.xml；Mac/Linux：open -a TextEdit web.xml）

如何在手机上高质量地将XML转换成PDF？ Apr 02, 2025 pm 09:48 PM

在手机上高质量地将XML转换成PDF需要：使用无服务器计算平台在云端解析XML并生成PDF。选择高效的XML解析器和PDF生成库。正确处理错误。充分利用云端计算能力，避免在手机上进行繁重任务。根据需求调整复杂度，包括处理复杂的XML结构、生成多页PDF和添加图片。打印日志信息以帮助调试。优化性能，选择高效的解析器和PDF库，并可能使用异步编程或预处理XML数据。确保良好的代码质量和可维护性。

See all articles

JS解析XML文件和XML字符串详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题