JS解析XML的实现代码

作者:拾光时间:2026-10-24 09:19:48浏览:480

本文提供了使用JavaScript解析XML文件的完整代码示例,重点解决了IE与Firefox浏览器的兼容性问题。通过判断ActiveXObject和createDocument方法,分别处理不同浏览器的XML加载逻辑,并展示了如何遍历节点获取数据。

JS解析XML的实现代码

JavaScript代码示例:


具体实现如下:

 
<script language="javascript" type="text/javascript">
// 指定需解析的XML文件路径
var uRl = "jsReadXml.xml";
var xmlDoc;
// 初始化并赋值上述变量
// function showcurcity(){
if(window.ActiveXObject)
{ 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false"
xmlDoc.load(uRl);
getvalue();
} 
else if(document.implementation && document.implementation.createDocument)
{ 
xmlDoc=document.implementation.createDocument("", "root", null);
xmlDoc.load(uRl);
xmlDoc.onload=getvalueff;
} 
// else {
// return null;
// } 
// } 
function getvalue()
{ 
var nodes=xmlDoc.documentElement.childNodes;
var now=new Date();
for(i=0;i<nodes.length;i++){
var value=nodes.item(i).childNodes.item(0).text ;
alert(nodes.item(i).childNodes.item(1).text);
alert(nodes.item(i).childNodes.item(2).text);
} 
} 
function getvalueff(){
var cCode=xmlDoc.getElementsByTagName("date");
var now = new Date();
var nowvalue=now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日';
for(i=0;i<cCode.length;i++)
{ 
alert(xmlDoc.getElementsByTagName("imgsrc")[i].childNodes[0].nodeValue);
alert(xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue);
alert(xmlDoc.getElementsByTagName("url")[i].childNodes[0].nodeValue);
} 
} 
</script>

XML数据结构示例:


具体实现如下:

 
<?xml version="1.0" encoding="UTF-8" ?>
<root>
<imags>
<imgsrc>images/ad-01.jpg</imgsrc>
<title>胡志明市</title>
<url>http://torchrelay.beijing2008.cn/cn/journey/hochiminhcity/</url>
</imags>
<imags>
<imgsrc>images/ad-02.jpg</imgsrc>
<title>香港2</title>
<url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url>
</imags>
<imags>
<imgsrc>images/ad-03.jpg</imgsrc>
<title>香港3</title>
<url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url>
</imags>
<imags>
<imgsrc>images/ad-04.jpg</imgsrc>
<title>香港4</title>
<url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url>
</imags>
<imags>
<imgsrc>images/ad-05.jpg</imgsrc>
<title>香港5</title>
<url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url>
</imags>
</root>

以下参考资料可供参考


分析IE与Firefox中Js读取xml文件的差异


为实现奥运圣火传递路线功能,需兼容IE与Firefox读取xml文件,耗时较多。


具体实现如下:

 
<script language="javascript" type="text/javascript">
var xmlDoc;
function showcurcity()
{ 
if(window.ActiveXObject)
{ 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false"
xmlDoc.load("OlyCity.xml");
getvalue();
} 
else if(document.implementation && document.implementation.createDocument)
{ 
xmlDoc=document.implementation.createDocument("", "root", null);
xmlDoc.load('OlyCity.xml');
xmlDoc.onload=getvalueff;
} 
else
{ 
return null;
} 
} 
function getvalue()
{ 
var nodes=xmlDoc.documentElement.childNodes;
var now=new Date();
for(i=0;i<nodes.length;i++){
var value=nodes.item(i).childNodes.item(0).text ;
if(value==now.toLocaleDateString())
{ 
window.document.getElementById('curcity').innerText=nodes.item(i).childNodes.item(1).text;
window.document.getElementById('curcity').href =nodes.item(i).childNodes.item(2).text;
} 
} 
} 
function getvalueff(){
var cCode=xmlDoc.getElementsByTagName("date");
var now = new Date();
var nowvalue=now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日';
for(i=0;i<cCode.length;i++)
{ 
var value=cCode[i].childNodes[0].nodeValue;
if(value==nowvalue)
{ 
window.document.getElementById('curcity').href =xmlDoc.getElementsByTagName("url")[i].childNodes[0].nodeValue;;
window.document.getElementById('curcity').childNodes[0].nodeValue=xmlDoc.getElementsByTagName("city")[i].childNodes[0].nodeValue;
} 
} 
} 
setInterval(showcurcity,1000);
</script>

以下是xml的片断.


具体实现如下:

 
<?xml version="1.0" encoding="gb2312" ?>
<root>
<citymessage>
<date>2008年4月29日</date>
<city>胡志明市</city>
<url>http://torchrelay.beijing2008.cn/cn/journey/hochiminhcity/</url>
</citymessage>
<citymessage>
<date>2008年4月30日</date>
<city>香港</city>
<url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url>
</citymessage>
</root>
作者最新文章