原生javascript实现解析XML文档与字符串

解析XML文档和字符串是在Web开发过程中经常遇到的问题。在JavaScript中，我们可以使用DOM API或者XMLHttpRequest对象来解析XML文档。而比较简便的解析XML字符串的方式则是使用DOMParser。

使用DOMParser解析XML字符串

JavaScript内置的DOMParser对象可以将XML字符串解析为DOM对象。使用方法如下：

const parser = new DOMParser();
const xmlString = `<?xml version="1.0"?>
<bookstore>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J.K. Rowling</author>
  </book>
  <book category="web">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
  </book>
</bookstore>`;
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
console.log(xmlDoc);

上面的代码首先创建一个DOMParser对象，然后使用parseFromString方法将XML字符串解析为DOM对象。第一个参数指定需要解析的XML字符串，第二个参数指定解析的内容类型为XML。

解析成功后，我们可以通过标准的DOM操作API获取和修改DOM对象的各个节点。

使用原生JavaScript解析XML文档

对于XML文档，我们可以使用内置的XMLHttpRequest对象获取，并使用DOMParser解析获得的字符串。具体的使用方法如下：

const xhr = new XMLHttpRequest();
xhr.open("GET", "bookstore.xml");
xhr.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(this.responseText, "text/xml");
    console.log(xmlDoc);
  }
};
xhr.send();

上面的代码首先创建一个XMLHttpRequest对象，并使用open方法设置请求方式和请求的URL。同时，我们设置了该对象的onreadystatechange属性，当请求状态为4且响应状态码为200时，即请求成功，我们使用DOMParser解析返回的XML字符串。

示例一：解析XML并获取数据

考虑到解析XML文档的实际应用场景，我们需要从中获取特定的数据并进行处理。例如我们有下面这样一个XML文档：

<Bookstore>
  <Book category="Children">
    <Title>The Cat in the Hat</Title>
    <Author>Dr. Seuss</Author>
    <Year>1957</Year>
    <Price>7.95</Price>
  </Book>
  <Book category="Mystery">
    <Title>The Da Vinci Code</Title>
    <Author>Dan Brown</Author>
    <Year>2003</Year>
    <Price>18.99</Price>
  </Book>
  <Book category="Mystery">
    <Title>The Catcher in the Rye</Title>
    <Author>J.D. Salinger</Author>
    <Year>1951</Year>
    <Price>10.99</Price>
  </Book>
</Bookstore>

我们要获取所有“Mystery”类型书籍的作者和价格，可以使用如下代码：

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const mysteryBooks = xmlDoc.querySelectorAll('Book[category="Mystery"]');
const bookList = mysteryBooks.forEach((book) => {
  const title = book.querySelector("Title").textContent;
  const author = book.querySelector("Author").textContent;
  const price = book.querySelector('Price').textContent;
  console.log(`${title} by ${author}: $${price}`);
});

上面的代码解析xml并获取文档中book的所有分类为"Mystery"的元素，然后使用forEach遍历该元素，获取其中的title、author和price节点的文本内容，并使用console.log()输出结果。

示例二：使用Ajax异步加载XML文档

在实际场景下，我们可能需要从服务器端获取XML文档。使用Ajax异步加载文档，在文档就绪后进行解析处理。示例代码如下：

const xhr = new XMLHttpRequest();
xhr.open("GET", "books.xml");
xhr.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(this.responseText, "text/xml");
    const bookList = xmlDoc.querySelectorAll("Book");
    // do something with bookList
  }
};
xhr.send();

上面的代码中，我们使用XMLHttpRequest对象进行异步加载XML文档，并在响应状态码200时，使用DOMParser解析XML文档字符串。

这样，我们就能够轻松地在JavaScript中解析XML文档和字符串了。