XML作为一种结构化的数据格式，至今仍在接口对接、配置文件、站点地图等场景中被广泛使用。前端开发中，拿到一段XML数据后，往往需要用JavaScript去读取它、修改其中的内容，再序列化成字符串发回服务端。这个过程涉及解析、遍历、修改、序列化四个步骤，每一步都有对应的API和注意事项，下面逐一展开讲解。
一、先解析：把XML字符串变成可操作的DOM对象
JavaScript本身无法直接操作一段XML字符串，必须先把它解析成DOM文档对象。浏览器端提供了DOMParser这个构造函数，用法非常简单，实例化之后调用parseFromString方法即可。第二个参数要根据文档类型传入text/xml或者application/xml。
var xmlStr = '<books><book id="1"><title>JavaScript入门</title></book></books>'; var parser = new DOMParser(); var xmlDoc = parser.parseFromString(xmlStr, "text/xml"); console.log(xmlDoc);
这里有一个非常容易踩的坑：如果XML字符串本身有语法错误，parseFromString并不会抛出异常，而是返回一个带有parsererror节点的文档。如果不做检查就继续操作，后面会莫名其妙地取不到数据。稳妥的做法是解析后先判断一下：
function parseXML(str) {
var doc = new DOMParser().parseFromString(str, "text/xml");
if (doc.getElementsByTagName("parsererror").length > 0) {
throw new Error("XML解析失败，请检查格式");
}
return doc;
}
另外要注意XML比HTML严格得多：标签必须闭合，属性值必须用引号包起来，大小写敏感。写错一个字母，解析结果就完全不同了。
二、修改节点内容与属性值
解析完成之后，修改操作就和操作HTML DOM基本一致了。修改元素的文本内容有两种方式，一种是通过textContent属性直接赋值，另一种是修改firstChild.nodeValue。推荐使用前者，因为textContent会自动清空元素下的所有子节点再写入新文本，不容易留下残留节点。
var xmlDoc = parseXML(xmlStr);
var title = xmlDoc.getElementsByTagName("title")[0];
// 方式一：直接设置文本
title.textContent = "JavaScript进阶指南";
// 方式二：通过文本节点修改
if (title.firstChild) {
title.firstChild.nodeValue = "JavaScript实战手册";
}
修改属性可以用setAttribute方法，它接收两个参数：属性名和新的属性值。如果属性不存在，会自动创建这个属性。对应的，getAttribute用来读取属性，removeAttribute用来删除属性。这三个方法配合起来，基本能覆盖日常的属性操作需求。
var book = xmlDoc.getElementsByTagName("book")[0];
// 修改已有属性
book.setAttribute("id", "100");
// 新增属性
book.setAttribute("category", "编程");
// 读取属性
console.log(book.getAttribute("category")); // 输出：编程
// 删除属性
book.removeAttribute("category");
有一点需要特别提醒：如果XML文档声明了命名空间，比如根元素带有xmlns属性，那么使用getElementsByTagName时传入的标签名需要带上前缀，例如ns:book。更规范的做法是使用getElementsByTagNameNS，传入命名空间URI和本地名称，这样不受前缀命名的影响，代码更健壮。
三、动态创建、插入和删除节点
除了修改已有内容，很多时候还需要往XML里添加新节点或者删掉多余节点。创建节点统一使用createElement，注意这里的document必须是解析出来的XML文档对象，而不是页面的document，否则创建出来的节点命名空间会对不上，序列化时可能报错。
// 创建新的book节点
var newBook = xmlDoc.createElement("book");
newBook.setAttribute("id", "2");
var newTitle = xmlDoc.createElement("title");
newTitle.textContent = "CSS权威指南";
newBook.appendChild(newTitle);
// 插入到根节点下
var root = xmlDoc.documentElement;
root.appendChild(newBook);
// 删除第一个book节点
var firstBook = xmlDoc.getElementsByTagName("book")[0];
root.removeChild(firstBook);
插入节点的位置也可以精确控制。除了appendChild追加到末尾之外，还可以用insertBefore把新节点插到某个指定节点前面。删除节点时记得一定要通过父节点去调用removeChild，直接在目标节点上调用是无效的。如果想清空某个节点下的全部子节点，可以循环删除，也可以直接把textContent设为空字符串。
四、序列化：把修改后的DOM转回XML字符串
修改完成后，通常需要把DOM对象重新转成字符串，这一步叫序列化。浏览器端使用XMLSerializer，调用它的serializeToString方法即可。需要留意的是，序列化结果的声明头<?xml version="1.0"?>不会自动带上，如果服务端需要声明头，得自己手动拼接。
var serializer = new XMLSerializer(); var result = serializer.serializeToString(xmlDoc); // 手动补充XML声明头 result = '<?xml version="1.0" encoding="UTF-8"?>' + result; console.log(result);
如果是在Node.js环境中处理XML，情况就不同了。Node.js没有内置DOMParser和XMLSerializer，需要借助第三方库，常用的有xml2js和xmldom。xml2js的思路是把XML直接转成JavaScript对象，修改对象的属性后再用xml2js的Builder转回去，对熟悉对象操作的开发者来说更直观；而xmldom则完整实现了DOM接口，写法与浏览器端保持一致，代码迁移成本低。
// Node.js环境使用xmldom
const { DOMParser, XMLSerializer } = require('xmldom');
const doc = new DOMParser().parseFromString(xmlStr, "text/xml");
doc.getElementsByTagName("title")[0].textContent = "新标题";
const output = new XMLSerializer().serializeToString(doc);
最后总结一下完整的操作流程：先用DOMParser解析并校验，再通过getElementsByTagName定位目标节点，接着用textContent和setAttribute修改内容，需要增删节点时用createElement配合appendChild、removeChild，最后用XMLSerializer输出结果。只要记住操作的都是XML文档对象而不是页面文档，避开命名空间和解析报错这两个坑，整个流程其实非常顺畅。
XMLJavaScriptDOM修改时间：2026-09-11 04:34:27