JS解析XML实例分析

JS解析XML实例分析

在前端开发中，我们常常需要处理XML数据格式，通过使用JavaScript解析XML可以轻易实现对XML的解析操作。本文将为读者介绍基于JavaScript解析XML的两种方式，DOM方式与SAX方式，并提供相应的示例程序。

DOM方式解析XML

DOM（Document Object Model，文档对象模型）方式解析XML是将XML文档作为DOM的一个树形层次结构进行解析的。通过遍历DOM树，我们可以轻松地获取所需的数据。

示例1：使用DOM方式解析XML

以下是一个简单的XML文档：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="web" price="100">
    <title>HTML5基础</title>
    <author>张三</author>
  </book>
  <book category="database" price="200">
    <title>MySQL数据库</title>
    <author>李四</author>
  </book>
</bookstore>

接下来，我们使用DOM方式解析XML，获取所有book的标题和作者：

let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString,"text/xml");
let books = xmlDoc.getElementsByTagName("book");
for (let i = 0; i < books.length; i++) {
  let book = books[i];
  let title = book.getElementsByTagName("title")[0].childNodes[0].nodeValue;
  let author = book.getElementsByTagName("author")[0].childNodes[0].nodeValue;
  console.log(title + " - " + author);
}

输出结果：

HTML5基础 - 张三
MySQL数据库 - 李四

以上代码使用了DOMParser对象将XML字符串转换为XML文档对象，通过getElementsByTagName方法获取指定标签名的元素列表，并通过遍历方式获取元素的子元素信息。

SAX方式解析XML

SAX（Simple API for XML，简单API for XML）方式解析XML是基于事件驱动的方式，当读取XML文档时，解析器触发相应的事件并处理事件响应函数，从而实现对XML的解析操作。

示例2：使用SAX方式解析XML

以下是示例1中同样的XML文档：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book category="web" price="100">
        <title>HTML5基础</title>
        <author>张三</author>
    </book>
    <book category="database" price="200">
        <title>MySQL数据库</title>
        <author>李四</author>
    </book>
</bookstore>

接下来，我们使用SAX方式解析XML，获取所有book的标题和作者：

let saxParser = require("sax").parser(true);
let title, author;
saxParser.onopentag = function (node) {
    if (node.name === "book") {
        console.log(title + " - " + author);
        title = "";
        author = "";
    }
};
saxParser.ontext = function (text) {
    if (title !== undefined) {
        title += text;
    }
    if (author !== undefined) {
        author += text;
    }
};
saxParser.write(xmlString).close();

输出结果：

HTML5基础 - 张三
MySQL数据库 - 李四

以上代码使用了sax-js库提供的SAXParser对象，通过注册事件响应函数获取XML文档节点信息。在onopentag事件中，判断节点名称，从而确定是否需要输出数据。在ontext事件中，获取节点内容信息。

总结

DOM方式与SAX方式各有优缺点，DOM方式需要将整个XML文档解析为DOM树，在处理大型XML文档时会很慢，而SAX方式相对较快，可以对大型XML文档进行解析。在选择解析方式时，需要根据实际需求进行选择。