解析XML文档和字符串是在Web开发过程中经常遇到的问题。在JavaScript中,我们可以使用DOM API或者XMLHttpRequest对象来解析XML文档。而比较简便的解析XML字符串的方式则是使用DOMParser。
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对象的各个节点。
对于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文档:
<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()
输出结果。
在实际场景下,我们可能需要从服务器端获取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文档和字符串了。
本文链接:http://task.lmcjl.com/news/8922.html