js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)

JS解析XML字符串和XML文档的实现原理主要包括两个步骤：将XML字符串解析成XML文档；通过XPath语法解析XML文档中的节点和属性信息。本文将详细讲解这两个步骤，并提供IE和火狐两种实现方式的示例代码。

将XML字符串解析成XML文档

将XML字符串解析成XML文档是解析XML数据的第一步，一些常见的解析方式包括使用DOMParser对象和ActiveXObject对象。下面分别介绍这两种方式的实现原理和示例代码。

DOMParser

DOMParser是浏览器内置的DOM解析器，可将XML字符串解析成一个XML文档对象。使用DOMParser对象的步骤如下：

1. 创建DOMParser对象；

2. 调用parseFromString方法，将XML字符串作为参数传入；

3. 获取解析后的XML文档对象。

下面是DOMParser的示例代码：

// 创建DOMParser对象
var parser = new DOMParser();

// 将XML字符串解析成XML文档
var xmlStr = '<root><book><name>JavaScript</name><author>John</author></book></root>';
var xmlDoc = parser.parseFromString(xmlStr, 'text/xml');

// 获取XML文档中的节点信息
var books = xmlDoc.getElementsByTagName('book');
for (var i = 0; i < books.length; i++) {
  var name = books[i].getElementsByTagName('name')[0].childNodes[0].nodeValue;
  var author = books[i].getElementsByTagName('author')[0].childNodes[0].nodeValue;
  console.log(name, author);
}

ActiveXObject

ActiveXObject是IE浏览器中内置的XML解析器对象，提供了DOM和SAX两种解析方式。使用ActiveXObject对象解析XML字符串的步骤如下：

1. 创建ActiveXObject对象，指定解析方式为DOM或SAX；

2. 调用loadXML方法，将XML字符串作为参数传入；

3. 获取解析后的XML文档对象。

下面是使用DOM方式解析XML字符串的ActiveXObject示例代码：

// 创建ActiveXObject对象，指定解析方式为DOM
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');

// 将XML字符串解析成XML文档
var xmlStr = '<root><book><name>JavaScript</name><author>John</author></book></root>';
xmlDoc.loadXML(xmlStr);

// 获取XML文档中的节点信息
var books = xmlDoc.getElementsByTagName('book');
for (var i = 0; i < books.length; i++) {
  var name = books[i].getElementsByTagName('name')[0].childNodes[0].nodeValue;
  var author = books[i].getElementsByTagName('author')[0].childNodes[0].nodeValue;
  console.log(name, author);
}

通过XPath语法解析XML文档中的节点和属性信息

通过XPath语法解析XML文档中的节点和属性信息是解析XML数据的第二步。XPath是一种XML文档中定位和选择节点的语法，通常使用document.evaluate方法调用。下面分别介绍IE和火狐浏览器中使用XPath的方法和示例代码。

IE中使用XPath

IE浏览器中使用XPath需要创建一组专用的对象，使用该组对象可以快速的在XML内定位到所需要的节点或属性信息。

// 创建XML文档对象
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.loadXML('<root><book><name>JavaScript</name><author>John</author></book></root>');

// 创建XPath对象
var xpath = new ActiveXObject('MSXML2.XPath');

// 选择名称为name的节点信息
xpath.setExpression('//name');
var nodes = xpath.selectNodes(xmlDoc);
console.log(nodes[0].text);

// 选择作者为John的书籍节点信息
xpath.setExpression('//book[author="John"]');
var books = xpath.selectNodes(xmlDoc);
for (var i = 0; i < books.length; i++) {
  console.log(books[i].getElementsByTagName('name')[0].text);
}

火狐中使用XPath

火狐浏览器中使用XPath需要创建一个XPathEvaluator对象，使用该对象可以通过evaluate方法，快速的在XML文档内定位到所需要的节点或属性信息。

// 创建XML文档对象
var parser = new DOMParser();
var xmlDoc = parser.parseFromString('<root><book><name>JavaScript</name><author>John</author></book></root>', 'text/xml');

// 创建XPathEvaluator对象
var evaluator = new XPathEvaluator();

// 选择名称为name的节点信息
var result = evaluator.evaluate('//name', xmlDoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
console.log(result.singleNodeValue.textContent);

// 选择作者为John的书籍节点信息
var result2 = evaluator.evaluate('//book[author="John"]', xmlDoc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < result2.snapshotLength; i++) {
  console.log(result2.snapshotItem(i).getElementsByTagName('name')[0].textContent);
}

综上所述，通过DOMParser或ActiveXObject将XML字符串解析成XML文档，再通过XPath语法解析XML文档中的节点和属性信息，便可完成XML数据的解析任务。