JavaScript如何解析xml数据？ 原生JS与jQuery处理xml的两种方式

原生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 等方法读取节点内容

示例代码：

const xmlStr = `

  
    
    Nicholas Zakas
  
  
    
    Kyle Simpson
  
`;

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" 即可。

示例代码：

$.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 项目的场景。根据实际需求选择即可。