JavaScript 加载 XML 并解析节点值的实现方法

作者:木棉

时间:2026-10-30

浏览:152

本文介绍如何在 JavaScript 中加载 XML 文件并解析其节点值。通过兼容 IE 与 Firefox 的 DOM 创建方式,演示如何获取 XML 节点属性(如 bookID)及子节点文本内容。代码包含 ActiveXObject 与 createDocument 两种初始化路径,并提供遍历节点获取具体值的完整示例。

文章目录

JavaScript 加载 XML 文件

具体实现代码如下所示:

兼容 IE 与 Firefox 的 DOM 初始化


   var xmlDoc = null;
    function LoadXml(xmlPath) {
      try {
        if (window.ActiveXObject) {
          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        }
      } catch (e) {
        try {
          xmlDoc = document.implementation.createDocument("", "", null);
      }
        catch (e) {
          alert(e.Message);
        }
      }
       try{
       xmlDoc.async=false;
       xmlDoc.load(xmlPath);
       return (xmlDoc);
      }
     catch (e) {
       alert(e.Message);
      }
   }
   //根据节点名称获取属性的值
   function GetNodes(nodeName, attrName) {
     var xmldata = LoadXml("test.xml");
     //获取xml第一个节点的值
     //var booksName = xmldata.getElementsByTagName("bookName")[0].childNodes[0].nodeValue;
//     //获取所有xml下面所有节点的值
//     var docElement=xmldata.getElementsByTagName("root");
//     for(var j=0;j<docElement.length;j++){
//     //获取作者
//     var Author=docElement[i].getElementsByTagName("Author")[0].firstChild.nodeValue;
//     //获取时间
//     var time=docElement[i].getElementsByTagName("time")[0].firstChild.nodeValue;
//     //获取作者的联系方式 
//     var phone=docElement[i].getElementsByTagName("phone")[0].firstChild.nodeValue;
//     }
//FF
     var nodes = xmldata.selectNodes("//" + nodeName);
     for (var i = 0; i < nodes.length; i++) { 
     //获取属性名称节点的值
     alert(nodes[i].getAttribute(attrName);
     }
   }

解析 XML 节点属性与值

在 Firefox 浏览器环境下获取 XML 属性节点的值

遍历节点获取属性及文本内容


var cNodes=xmlDoc.getElementsByTagName("book");
for (var j = 0; j < cNodes.length; i++) {
var bookID = xmlDoc.getElementsByTagName("book")[j].getAttribute("bookID");
//获取book节点下面的bookTitle节点的值
var bookTitile = xmlDoc.getElementsByTagName("book")[j].childNodes[0].nodeValue;

以上即为 JavaScript 加载 XML 并解析各节点值的全部实现内容,感谢阅读。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章