首先通过fetch API获取XML字符串，再用DOMParser解析为DOM对象，接着使用getElementsByTagName、getAttribute等DOM方法遍历、修改、添加或删除节点，最后用XMLSerializer将更新后的DOM序列化回字符串，实现完整XML数据操作流程。
在JavaScript中操作XML数据，核心在于利用浏览器内置的DOM解析器（
DOMParser
）将XML字符串转换为可操作的DOM对象，然后通过标准的DOM API进行增删改查。无论是从服务器获取XML，还是在客户端动态生成，JavaScript都能提供一套相对直观的工具链来处理这些结构化数据。
要深入理解如何在JavaScript里玩转XML，我们得从几个关键步骤说起。
首先，你得有个XML数据源。这通常意味着从服务器异步加载。过去我们用
XMLHttpRequest
，现在更推荐
fetch
API，它更现代，基于Promise，写起来也更优雅。
获取XML数据：
立即学习“Java免费学习笔记（深入）”；
使用
fetch
：
fetch('data.xml') // 假设你的XML文件名为 data.xml .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.text(); // 获取原始XML字符串 }) .then(xmlString => { // 接下来就是解析这个字符串了 console.log("获取到的XML字符串:", xmlString); parseAndManipulateXML(xmlString); }) .catch(error => { console.error('获取XML数据时出错:', error); });
解析和操作XML字符串：
一旦你拿到了XML字符串，就需要把它变成JavaScript能理解和操作的DOM对象。
DOMParser
就是干这个的。
// 假设我们有一个XML字符串示例const sampleXml = `Everyday Italian Giada De Laurentiis 2005 30.00Harry Potter J K. Rowling 2005 29.99 `;function parseAndManipulateXML(xmlString) { const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlString, "application/xml"); // 检查解析错误 const errorNode = xmlDoc.querySelector('parsererror'); if (errorNode) { console.error('XML解析错误:', errorNode.textContent); return; } console.log("解析后的XML DOM对象:", xmlDoc); // 现在你可以像操作HTML DOM一样操作这个xmlDoc了 // 1. 获取元素： // 比如，获取所有book元素 const books = xmlDoc.getElementsByTagName("book"); console.log("找到的书籍数量:", books.length); // 遍历并打印书名和作者 for (let i = 0; i 0) { const firstBookTitle = books[0].getElementsByTagName("title")[0]; if (firstBookTitle) { firstBookTitle.textContent = "JavaScript Mastery Guide (Updated)"; // 修改文本内容 console.log("第一本书名已更新:", firstBookTitle.textContent); } books[0].setAttribute("category", "programming"); // 修改属性 console.log("第一本书的分类已更新为:", books[0].getAttribute("category")); } // 4. 创建并添加新元素： const newBook = xmlDoc.createElement("book"); newBook.setAttribute("category", "tech"); const newTitle = xmlDoc.createElement("title"); newTitle.textContent = "Web Development with AI"; const newAuthor = xmlDoc.createElement("author"); newAuthor.textContent = "AI Co-pilot"; const newYear = xmlDoc.createElement("year"); newYear.textContent = "2024"; newBook.appendChild(newTitle); newBook.appendChild(newAuthor); newBook.appendChild(newYear); xmlDoc.documentElement.appendChild(newBook); // 添加到根元素 (catalog) 下 console.log("已添加新书。"); // 5. 删除元素： if (books.length > 1) { const secondBook = books[1]; // 注意这里books是live collection，删除后长度会变 xmlDoc.documentElement.removeChild(secondBook); console.log("已删除第二本书。"); } // 6. 将修改后的DOM对象序列化回XML字符串： const serializer = new XMLSerializer(); const updatedXmlString = serializer.serializeToString(xmlDoc); console.log("修改后的XML字符串:n", updatedXmlString);}// 调用解析函数，演示操作// parseAndManipulateXML(sample
以上就是怎么使用JavaScript操作XML数据？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521606.html
微信扫一扫 
支付宝扫一扫 
