DOM 修改 XML （JavaScript）
DOM（文档对象模型）是 JavaScript 的核心，同时也是操作 XML 的一种标准方式。XML（可扩展标记语言）是一种常用于存储和交换数据的格式，同时也是 HTML 的基础。在前端开发领域，我们常常需要使用 JavaScript 来操作 XML，例如在 AJAX 开发中向服务器发送 XML 请求或以 XML 格式接收响应。本文将着重介绍如何使用 JavaScript 的 DOM 对 XML 进行修改操作。
XML 结构简介
在学习 DOM 修改 XML 前，我们需要先了解一下 XML 的基本结构。XML 是以标记作为基本语法单位的文本，一个 XML 基本结构如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<root>
<element1 attribute1="value1">content1</element1>
<element2>content2</element2>
<element3>
<subelement1>subcontent1</subelement1>
<subelement2>subcontent2</subelement2>
</element3>
</root>其中，XML 文档必须以 <?xml ... ?> 声明开始，而顶层元素（根元素）称为 root，其他元素称为 element。每个元素可以有一个或多个属性（例如 attribute1），属性用于提供元素的描述信息。元素还可以包含其他元素，这种元素嵌套称为元素层级结构。
DOM 修改 XML 基本操作
JavaScript 的 DOM 可以解析 XML，并将其转化为一棵节点树，允许我们使用 JavaScript 编写代码对这棵节点树进行修改操作。
令 xmlstr 为一个 XML 字符串，我们可以使用 JavaScript 的 DOMParser 对其进行解析：
const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlstr, "text/xml");
解析完成后，我们可以对解析后的 xmlDoc 进行修改。
对于 XML 中的元素内容，我们可以通过 nodeValue 属性获取其值：
const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"这里我们使用 getElementsByTagName 获取名为 element1 的元素节点，childNodes[0] 获取其文本节点，最后再使用 nodeValue 获取其值。
对于 XML 中的元素属性，我们可以使用 getAttribute 和 setAttribute 方法来获取和设置属性值：
const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"
xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");这里我们使用 getAttribute 获取名为 attribute1 的 element1 的属性值，然后使用 setAttribute 设置 attribute1 的新值为 newvalue。需要注意的是，在设置属性时，需要指定该属性所属的元素节点以及属性名。
我们可以使用 createElement 方法在 XML 文档中创建新的元素节点：
const newElement = xmlDoc.createElement("newelement");这里我们创建了一个名为 newelement 的新元素节点。
我们可以使用 appendChild 方法将一个节点添加到另一个节点的子节点列表中：
const element1 = xmlDoc.getElementsByTagName("element1")[0];
element1.appendChild(newElement);这里我们将新创建的 newelement 添加到 element1 的子节点列表中。
我们可以使用 removeChild 方法从其父节点的子节点列表中删除一个节点：
const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);这里我们将 subelement2 从其父节点 element1 的子节点列表中删除。
完整示例代码：
// 解析 XML
const parser = new DOMParser();
const xmlstr = `
<?xml version="1.0" encoding="UTF-8"?>
<root>
<element1 attribute1="value1">content1</element1>
<element2>content2</element2>
<element3>
<subelement1>subcontent1</subelement1>
<subelement2>subcontent2</subelement2>
</element3>
</root>`;
const xmlDoc = parser.parseFromString(xmlstr, "text/xml");
// 获取元素内容并修改
const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"
xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue = "newcontent1";
// 获取元素属性并修改
const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"
xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");
// 创建新节点并添加
const newElement = xmlDoc.createElement("newelement");
const element2 = xmlDoc.getElementsByTagName("element2")[0];
element1.appendChild(newElement);
// 删除节点
const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);
console.log(xmlDoc.documentElement.outerHTML);需要注意的是，修改 XML 中的节点后需要使用 outerHTML 属性输出完整的 XML 字符串。以上示例代码将输出修改后的 XML 内容：
<?xml version="1.0" encoding="UTF-8"?>
<root>
<element1 attribute1="newvalue">newcontent1<newelement/></element1>
<element2>content2</element2>
<element3>
<subelement1>subcontent1</subelement1>
</element3>
</root>结语
通过使用 JavaScript 的 DOM 对 XML 进行修改操作，我们可以轻松地添加、删除、修改其中的元素和属性。需要注意的是，XML 的结构比较灵活，并且可以嵌套多层，因此在修改 XML 时需要根据具体情况进行节点操作。通过学习本文所介绍的 DOM 修改 XML 的基本操作，相信读者可以灵活地使用 JavaScript 对 XML 进行修改，提升开发效率。
以上是dom 修改xml javascript的详细内容。更多信息请关注PHP中文网其他相关文章！
