原生JS通过DOMParser解析XML字符串为DOM对象，结合getElementsByTagName等方法提取数据，适合无库环境；jQuery则利用$.ajax配合dataType: "xml"自动解析，通过find、attr、text等方法简化节点操作，语法更简洁，适用于已有jQuery项目。
JavaScript 解析 XML 数据主要依赖于浏览器提供的 DOMParser 和 XMLHttpRequest 等原生 API，也可以借助 jQuery 简化操作。下面分别介绍原生 JS 和 jQuery 处理 XML 的常用方式。
原生 JavaScript 解析 XML
原生 JS 使用 DOMParser 将字符串形式的 XML 转换为可操作的 DOM 对象，再通过 DOM 方法提取数据。
常见步骤如下：
- 获取 XML 字符串（通常来自服务器响应）
- 使用 DOMParser().parseFromString() 解析成 XML DOM
- 使用 getElementsByTagName、getAttribute 等方法读取节点内容
示例代码：
立即学习“Java免费学习笔记（深入）”；
const xmlStr = `
<books>
<book id="1">
<title>JavaScript 高级程序设计</title>
<author>Nicholas Zakas</author>
</book>
<book id="2">
<title>你不知道的 JavaScript</title>
<author>Kyle Simpson</author>
</book>
</books>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, "text/xml");
const books = xmlDoc.getElementsByTagName("book");
for (let i = 0; i < books.length; i++) {
const title = books[i].getElementsByTagName("title")[0].textContent;
const author = books[i].getElementsByTagName("author")[0].textContent;
const id = books[i].getAttribute("id");
console.log(`ID: ${id}, 书名: ${title}, 作者: ${author}`);
}
如果从服务器加载 XML 文件，可以结合 fetch 使用：
fetch('data.xml')
.then(response => response.text())
.then(str => {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(str, "text/xml");
// 解析并处理 xmlDoc
});
jQuery 处理 XML 数据
jQuery 提供了更简洁的语法来解析和遍历 XML，底层仍使用原生解析器，但封装了选择器和遍历方法。
使用 $.ajax 请求 XML 并自动解析，设置 dataType: "xml" 即可。
示例代码：
立即学习“Java免费学习笔记（深入）”；
$.ajax({
url: 'data.xml',
dataType: 'xml',
success: function(xmlDoc) {
$(xmlDoc).find('book').each(function() {
const id = $(this).attr('id');
const title = $(this).find('title').text();
const author = $(this).find('author').text();
console.log(`ID: ${id}, 书名: ${title}, 作者: ${author}`);
});
},
error: function() {
console.error('XML 加载失败');
}
});
也可以手动解析字符串：
const $xml = $($.parseXML(xmlStr));
$xml.find('book').each(function() {
// 处理每个 book 节点
});
jQuery 的优势在于语法简洁，支持链式调用和熟悉的 CSS 选择器，适合快速开发。
基本上就这些。原生 JS 更通用、不依赖库；jQuery 写法更简洁，适合已有 jQuery 项目的场景。根据实际需求选择即可。
