XML作为一种常见的数据交换格式，在前后端交互、配置文件存储等场景中仍然被广泛使用，JavaScript提供了多种解析XML数据的方式，开发者可以根据项目需求选择合适的处理方案。
原生JS解析XML数据
原生JavaScript内置了XML解析能力，不需要依赖第三方库，核心是通过DOMParser对象将XML字符串转换为可操作的DOM文档对象，之后就可以像操作普通HTML DOM一样读取XML的内容。
基础解析步骤
首先需要将XML字符串传入DOMParser的parseFromString方法，指定解析类型为text/xml，得到XML文档对象后，就可以通过getElementsByTagName、querySelector等方法获取节点。
// 待解析的XML字符串
const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<user>
<id>1001</id>
<name>张三</name>
<age>25</age>
<hobby type="outdoor">爬山</hobby>
<hobby type="indoor">阅读</hobby>
</user>`;
// 创建XML解析器
const parser = new DOMParser();
// 解析XML字符串，得到XML文档对象
const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
// 获取根节点
const rootNode = xmlDoc.documentElement;
console.log('根节点名称：', rootNode.nodeName); // 输出 user
// 获取id节点内容
const idNode = xmlDoc.getElementsByTagName('id')[0];
console.log('用户ID：', idNode.textContent); // 输出 1001
// 获取name节点内容
const nameNode = xmlDoc.querySelector('name');
console.log('用户姓名：', nameNode.textContent); // 输出 张三
处理XML节点属性与多节点
XML节点可能包含属性，也可能存在多个同名的子节点，原生JS可以通过getAttribute方法获取属性值，通过遍历节点列表处理多个同名节点。
// 接上面的xmlDoc对象
// 获取所有hobby节点
const hobbyNodes = xmlDoc.getElementsByTagName('hobby');
console.log('爱好数量：', hobbyNodes.length); // 输出 2
// 遍历所有爱好节点，读取内容和属性
for (let i = 0; i < hobbyNodes.length; i++) {
const hobbyNode = hobbyNodes[i];
const hobbyType = hobbyNode.getAttribute('type');
const hobbyText = hobbyNode.textContent;
console.log(`爱好${i + 1}：类型${hobbyType}，内容：${hobbyText}`);
// 输出 爱好1：类型outdoor，内容：爬山
// 输出 爱好2：类型indoor，内容：阅读
}
处理解析错误
如果XML字符串格式不正确，parseFromString不会直接抛出异常，而是会在解析结果中生成parsererror节点，需要做错误判断避免后续逻辑出错。
const wrongXmlStr = '<user><id>1001</id>'; // 缺少闭合标签
const wrongXmlDoc = parser.parseFromString(wrongXmlStr, 'text/xml');
const errorNode = wrongXmlDoc.getElementsByTagName('parsererror');
if (errorNode.length > 0) {
console.error('XML解析失败，格式有误');
} else {
console.log('XML解析成功');
}
jQuery处理XML数据
如果项目中已经引入了jQuery库，可以使用jQuery的简化语法处理XML数据，jQuery会把解析后的XML文档包装成jQuery对象，支持使用jQuery的选择器和方法操作节点，代码更简洁。
基础解析与读取
jQuery没有内置的XML解析方法，仍然需要先使用原生DOMParser解析XML字符串得到文档对象，再将其转换为jQuery对象进行操作。
// 待解析的XML字符串，和上面的示例一致
const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<user>
<id>1001</id>
<name>张三</name>
<age>25</age>
</user>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
// 将XML文档对象转换为jQuery对象
const $xml = $(xmlDoc);
// 读取id内容
const userId = $xml.find('id').text();
console.log('用户ID：', userId); // 输出 1001
// 读取name内容
const userName = $xml.find('name').text();
console.log('用户姓名：', userName); // 输出 张三
// 读取age内容
const userAge = $xml.find('age').text();
console.log('用户年龄：', userAge); // 输出 25
处理属性与多节点
jQuery的attr方法可以获取节点属性，each方法可以遍历多个同名节点，相比原生JS的循环语法更简洁。
// 待解析的XML字符串，包含多个hobby节点
const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<user>
<hobby type="outdoor">爬山</hobby>
<hobby type="indoor">阅读</hobby>
</user>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
const $xml = $(xmlDoc);
// 遍历所有hobby节点
$xml.find('hobby').each(function(index) {
const hobbyType = $(this).attr('type');
const hobbyText = $(this).text();
console.log(`爱好${index + 1}：类型${hobbyType}，内容：${hobbyText}`);
// 输出 爱好1：类型outdoor，内容：爬山
// 输出 爱好2：类型indoor，内容：阅读
});
两种方式对比与选择
原生JS和jQuery解析XML的核心差异主要体现在依赖、语法复杂度和适用场景上，开发者可以根据实际情况选择：
| 对比维度 | 原生JS解析 | jQuery解析 |
|---|---|---|
| 外部依赖 | 无，浏览器原生支持 | 需要引入jQuery库 |
| 语法复杂度 | 稍复杂，需要处理DOM原生API | 更简洁，支持jQuery链式调用 |
| 适用场景 | 无jQuery依赖的项目、轻量场景 | 已引入jQuery的项目、快速开发场景 |
| 兼容性 | 支持现代浏览器，IE需要低版本适配 | 兼容性好，支持老版本IE |
注意：如果XML数据来自跨域请求，需要后端配置CORS允许跨域，否则会因为同源策略限制导致无法获取XML内容，解析流程也无法正常执行。
JavaScriptXML解析jQuery原生JS修改时间：2026-06-14 02:45:46