在HTML中，JavaScript 提供了几种方法来导入和处理 XML，以下是一个详细的技术教学，说明如何使用 JavaScript 从 XML 文件读取数据。
（图片来源网络，侵删）
步骤1：准备XML文件
确保你有一个格式正确的XML文件。data.xml 的内容可能如下：
<?xml version="1.0" encoding="UTF8"?> <items> <item> <name>Item 1</name> <description>This is item 1</description> </item> <item> <name>Item 2</name> <description>This is item 2</description> </item> </items>步骤2：创建HTML结构
在HTML文档中，你需要一个容器来显示XML数据，你可以创建一个列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Load XML with JavaScript</title> </head> <body> <ul id="itemList"></ul> <script src="loadXml.js"></script> </body> </html>步骤3：编写JavaScript代码
接下来，创建一个名为 loadXml.js 的 JavaScript 文件，用于加载和解析 XML 数据。
使用 XMLHttpRequest 对象
XMLHttpRequest 是传统的方式，用来异步获取 XML 数据。
// loadXml.js function loadXMLDoc(filename) { if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { // IE5/IE6 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET", filename, false); try { xhttp.send(); } catch (e) { window.alert("Unable to load file: " + e); return null; } return xhttp.responseXML; } var xmlDoc = loadXMLDoc("data.xml"); // 获取元素并添加到HTML中 var itemList = document.getElementById("itemList"); var items = xmlDoc.getElementsByTagName("item"); for (var i = 0; i < items.length; i++) { var itemName = items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue; var itemDescription = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue; var listItem = document.createElement("li"); listItem.textContent = itemName + ": " + itemDescription; itemList.appendChild(listItem); }使用 fetch API
现代浏览器支持 fetch API，它返回的是 Promise 对象，可以更简洁地处理异步操作。
// loadXml.js (使用 fetch API) function loadXMLDoc(url) { return fetch(url) .then(response => response.text()) .then(str => (new window.DOMParser()).parseFromString(str, "text/xml")); } loadXMLDoc("data.xml").then(xmlDoc => { var itemList = document.getElementById("itemList"); var items = xmlDoc.getElementsByTagName("item"); Array.from(items).forEach(item => { var itemName = item.getElementsByTagName("name")[0].childNodes[0].nodeValue; var itemDescription = item.getElementsByTagName("description")[0].childNodes[0].nodeValue; var listItem = document.createElement("li"); listItem.textContent = itemName + ": " + itemDescription; itemList.appendChild(listItem); }); }).catch(error => { console.error("Error loading XML:", error); });步骤4：运行代码
将HTML文件和JavaScript文件放在同一个目录下，并在浏览器中打开HTML文件，你应该能看到来自XML文件的数据被解析并显示在页面上。
归纳
以上介绍了两种在HTML中使用JavaScript导入和解析XML的方法。XMLHttpRequest 是一种传统方法，而 fetch API 提供了一种更现代的替代方案，根据你的需求和浏览器支持情况选择适合的方法，记得，由于同源策略的限制，如果XML文件位于不同的域，可能会遇到跨域问题，在这种情况下，你可能需要在服务器端配置CORS（CrossOrigin Resource Sharing）策略，或者使用JSONP等其他技术。
