JavaScript 加载与读取 XML 文件完整指南
本文详解 JavaScript 加载和读取 XML 文件的方法。涵盖建立 XML DOM 对象、设置异步或同步加载模式,以及利用 getElementsByTagName 和 nodeValue 等属性遍历节点。内容包含 IE 与非 IE 浏览器的兼容处理代码及示例,帮助开发者掌握 XML 数据交互技巧。
JavaScript 加载与读取 XML 文件完整指南
本文详细介绍如何使用 JavaScript 加载并读取 XML 文件,供开发者参考实践。
在开发过程中,经常需要通过 JS 加载和读取 XML 文件。实现这一功能主要分为两个步骤:首先是加载文件,其次是读取节点。
第一步:JS 加载 XML 文件
第一步:JS 加载 XML 文件
具体操作流程通常包括:(1)创建 XML DOM 对象;(2)配置加载模式,推荐使用异步方式,也可选择同步;(3)指定 XML 文件的 URL 并调用 load 方法。具体实现参考如下代码:
var xmlFileName="xxFile.xml";
var xmlDoc='';
if (window.ActiveXObject){ // IE
var activeXNameList=new Array("MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XMLDOM","MSXML.DOMDocument");
for(var h=0;h<activeXNameList.length;h++)
{
try{
xmlDoc=new ActiveXObject(activeXNameList[h]);
}catch(e){
continue;
}
if(xmlDoc) break;
}
}else if(document.implementation && document.implementation.createDocument){ //非 IE
xmlDoc=document.implementation.createDocument("","",null);
}else{
alert('can not create XML DOM object, update your browser please...');
}
xmlDoc.async=false; //同步,防止后面程序处理时遇到文件还没加载完成出现的错误,故同步等XML文件加载完再做后面处理
xmlDoc.load(xmlFileName); //加载XML
第二步:JS 读取 XML 文件节点
第二步:JS 读取 XML 文件节点
完成 XML 文件加载后,即可通过 DOM 相关方法读取其中的节点。对于 MS IE 和其他现代浏览器,读取方式基本一致,示例如下:
假设存在如下结构的 XML 文件:
<visiter>
<area areaid="shenzhen">
<areaname>shenzhen</areaname>
<user userid="001">
<name>shenzhenNBA</name>
<sex>man</sex>
</user>
</area>
<area areaid="shanghai">
<areaname>shenzhen</areaname>
<user userid="002">
<name>xiaoming</name>
<sex>woman</sex>
</user>
<user userid="003">
<name>zhangsan</name>
<sex>man</sex>
</user>
</area>
</visiter>
//JS读取 XML 文件中的 area 节点的方式如下:
var nodeList= xmlDoc.documentElement.getElementsByTagName("area"); // IE
for(var i=0;i<nodeList.length;i++){
//...遍历操作...
}
var nodeList=xmlDoc.getElementsByTagName("area"); // 非IE
for(var i=0;i<nodeList.length;i++){
//...遍历操作...
}
此外,这里提供几种读取节点的具体方法:
//MS IE
node.text ; //读取node节点的文本值
node.childNodes[i].text ; //读取 node 下的第 i 个[直接下一级]子节点的文本
node.getAttribute("attributeName") ; //读取 node 节点的属性名称为 attributeName 的属性值
//还有其他的方法等, 可以网上搜索
//非 MS IE
node.nodeValue ; //读取node节点的文本值
node.childNodes[i].nodeValue ; //读取 node 下的第 i 个[直接下一级]子节点的文本
node.getAttribute("attributeName") ; //读取 node 节点的属性名称为 attributeName 的属性值
//还有其他的方法等, 可以网上搜索
注意:此处额外推荐几款用于 XML 与 JSON 操作的在线工具,供参考使用:
在线 XML/JSON 互相转换工具: http://tools.jb51.net/code/xmljson
在线格式化 XML/在线压缩 XML: http://tools.jb51.net/code/xmlformat
XML 在线压缩/格式化工具: http://tools.jb51.net/code/xml_format_compress
在线 JSON 代码检验、美化、格式化工具: http://tools.jb51.net/code/json
JSON 在线格式化工具: http://tools.jb51.net/code/jsonformat
在线 json 压缩/转义工具: http://tools.jb51.net/code/json_yasuo_trans
如需了解更多 JavaScript 相关内容,可查阅本站专题:《JavaScript 中 ajax 操作技巧总结》、《JavaScript 操作 XML 文件技巧总结》、《JavaScript 中 json 操作技巧总结》、《JavaScript 错误与调试技巧总结》及《JavaScript 数据结构与算法技巧总结》
希望本文所述内容对大家的 JavaScript 程序设计有所帮助。
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
