JavaScript怎么解析XML JS处理XML数据方法

在前后端数据交互过程中，XML曾经是常用的数据格式之一，即使现在JSON更主流，依然有不少场景需要JavaScript解析XML数据。掌握JS处理XML数据方法，能够应对遗留系统对接、第三方接口返回XML格式数据等实际需求。

使用DOMParser解析XML字符串

DOMParser是浏览器内置的用于解析XML和HTML字符串的接口，是处理本地XML字符串最直接的方式，不需要额外发送网络请求。

基本使用步骤如下：首先创建DOMParser实例，然后调用其parseFromString方法，传入XML字符串和目标类型text/xml，就能得到对应的XML文档对象，之后可以像操作普通DOM一样遍历和获取XML中的数据。

下面是解析XML字符串的示例代码：

// 待解析的XML字符串
const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<user>
  <id>1001</id>
  <name>张三</name>
  <age>25</age>
  <hobby>阅读</hobby>
  <hobby>跑步</hobby>
</user>`;

// 创建DOMParser实例
const parser = new DOMParser();
// 解析XML字符串，得到XML文档对象
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');

// 获取根节点
const userNode = xmlDoc.querySelector('user');
// 获取子节点内容
const id = userNode.querySelector('id').textContent;
const name = userNode.querySelector('name').textContent;
const age = userNode.querySelector('age').textContent;
// 获取多个同名节点
const hobbyNodes = userNode.querySelectorAll('hobby');
const hobbies = Array.from(hobbyNodes).map(node => node.textContent);

console.log('用户ID:', id);
console.log('用户名:', name);
console.log('年龄:', age);
console.log('爱好:', hobbies);

通过XMLHttpRequest获取并解析远程XML

如果需要处理服务器返回的XML数据，可以使用XMLHttpRequest发送请求获取XML内容，再结合DOMParser进行解析，也可以直接通过XMLHttpRequest的responseXML属性获取解析后的文档对象。

注意如果服务器返回的Content-Type是application/xml或text/xml，XMLHttpRequest会自动将响应解析为XML文档，此时可以直接使用responseXML属性。

示例代码如下：

// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求方法和地址，假设接口返回XML格式数据
xhr.open('GET', 'https://ipipp.com/api/user.xml');

// 监听请求状态变化
xhr.onreadystatechange = function() {
  // 请求完成且状态为200
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 方式1：直接使用responseXML获取解析后的XML文档
    const xmlDoc = xhr.responseXML;
    if (xmlDoc) {
      const userName = xmlDoc.querySelector('name').textContent;
      console.log('获取到的用户名:', userName);
    } else {
      // 方式2：如果responseXML为null，手动用DOMParser解析
      const parser = new DOMParser();
      const manualXmlDoc = parser.parseFromString(xhr.responseText, 'text/xml');
      const userName = manualXmlDoc.querySelector('name').textContent;
      console.log('手动解析得到的用户名:', userName);
    }
  }
};

// 发送请求
xhr.send();

XML数据转换为JSON格式

XML的节点操作相对繁琐，很多开发者更习惯操作JSON格式的数据，因此可以将解析后的XML文档转换为JSON对象，方便后续处理。

转换的核心逻辑是遍历XML节点，区分元素节点、文本节点，处理同名子节点的情况，将同名子节点转换为数组，单个子节点转换为对应的值。

通用转换函数示例如下：

/**
 * 将XML文档转换为JSON对象
 * @param {Document} xmlDoc - 解析后的XML文档对象
 * @return {Object} 转换后的JSON对象
 */
function xmlToJson(xmlDoc) {
  // 获取根节点
  const root = xmlDoc.documentElement;
  
  /**
   * 递归转换单个节点
   * @param {Node} node - 当前XML节点
   * @return {Object|String} 转换后的结果
   */
  function parseNode(node) {
    // 如果是文本节点，直接返回文本内容
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent.trim();
      return text ? text : null;
    }
    
    // 元素节点处理
    const result = {};
    // 处理子节点
    const childNodes = node.childNodes;
    // 统计有效子节点（排除空文本节点）
    const validChildren = Array.from(childNodes).filter(child => {
      if (child.nodeType === Node.TEXT_NODE) {
        return child.textContent.trim() !== '';
      }
      return true;
    });
    
    // 没有有效子节点，返回空对象
    if (validChildren.length === 0) {
      return result;
    }
    
    // 只有一个文本子节点，直接返回文本值
    if (validChildren.length === 1 && validChildren[0].nodeType === Node.TEXT_NODE) {
      return validChildren[0].textContent.trim();
    }
    
    // 多个子节点，按名称分组
    const childMap = {};
    validChildren.forEach(child => {
      if (child.nodeType === Node.ELEMENT_NODE) {
        const childName = child.nodeName;
        const childValue = parseNode(child);
        if (childMap[childName]) {
          // 已经存在同名节点，转换为数组
          if (!Array.isArray(childMap[childName])) {
            childMap[childName] = [childMap[childName]];
          }
          childMap[childName].push(childValue);
        } else {
          childMap[childName] = childValue;
        }
      }
    });
    
    return childMap;
  }
  
  return {
    [root.nodeName]: parseNode(root)
  };
}

// 使用示例，结合之前的xmlString
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(`<?xml version="1.0" encoding="UTF-8"?>
<user>
  <id>1001</id>
  <name>张三</name>
  <age>25</age>
  <hobby>阅读</hobby>
  <hobby>跑步</hobby>
</user>`, 'text/xml');

const jsonResult = xmlToJson(xmlDoc);
console.log('转换后的JSON:', jsonResult);
// 输出：{ user: { id: '1001', name: '张三', age: '25', hobby: ['阅读', '跑步'] } }

处理XML的注意事项

• 编码问题：如果XML字符串包含中文等非ASCII字符，需要确保XML声明中的encoding和实际编码一致，否则可能出现乱码，DOMParser默认使用UTF-8编码解析。
• 错误处理：如果XML格式不合法，DOMParser解析后会在文档中生成<parsererror>节点，可以通过判断该节点是否存在来捕获解析错误。
• 浏览器兼容性：DOMParser在现代浏览器中都支持，如果需要兼容非常老的浏览器（如IE8及以下），需要使用ActiveXObject的方式解析XML，不过现在这类场景已经很少见。
• 节点遍历：可以使用querySelector、querySelectorAll方法通过CSS选择器获取节点，也可以使用getElementsByTagName等原生DOM方法，根据需求选择即可。

注意：如果XML中包含命名空间，获取节点时需要加上对应的命名空间前缀，或者使用getElementsByTagNameNS方法处理，避免获取不到节点的问题。

JavaScriptXML解析DOMParserXMLHttpRequestXML_to_JSON修改时间：2026-06-30 20:09:40