JS 加载读取XML文件教程：DOM创建、异步同步及节点遍历

JavaScript 加载与读取 XML 文件完整指南

本文详细介绍如何使用 JavaScript 加载并读取 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 文件节点

完成 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 程序设计有所帮助。

JavaScript 加载与读取 XML 文件完整指南

JavaScript 加载与读取 XML 文件完整指南

第一步：JS 加载 XML 文件

第二步：JS 读取 XML 文件节点

实用工具推荐