dom 修改xml javascript

dom 修改 xml （javascript）

DOM（文档对象模型）是 JavaScript 的核心，同时也是操作 XML 的一种标准方式。XML（可扩展标记语言）是一种常用于存储和交换数据的格式，同时也是 HTML 的基础。在前端开发领域，我们常常需要使用 JavaScript 来操作 XML，例如在 AJAX 开发中向服务器发送 XML 请求或以 XML 格式接收响应。本文将着重介绍如何使用 JavaScript 的 DOM 对 XML 进行修改操作。

XML 结构简介

在学习 DOM 修改 XML 前，我们需要先了解一下 XML 的基本结构。XML 是以标记作为基本语法单位的文本，一个 XML 基本结构如下所示：

  content1
  content2
  
    subcontent1
    subcontent2
  

其中，XML 文档必须以 声明开始，而顶层元素（根元素）称为 root，其他元素称为 element。每个元素可以有一个或多个属性（例如 attribute1），属性用于提供元素的描述信息。元素还可以包含其他元素，这种元素嵌套称为元素层级结构。

立即学习“Java免费学习笔记（深入）”；

DOM 修改 XML 基本操作

JavaScript 的 DOM 可以解析 XML，并将其转化为一棵节点树，允许我们使用 JavaScript 编写代码对这棵节点树进行修改操作。

1. 解析 XML

令 xmlstr 为一个 XML 字符串，我们可以使用 JavaScript 的 DOMParser 对其进行解析：

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlstr, "text/xml");

解析完成后，我们可以对解析后的 xmlDoc 进行修改。

2. 获取元素值

对于 XML 中的元素内容，我们可以通过 nodeValue 属性获取其值：

const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"

这里我们使用 getElementsByTagName 获取名为 element1 的元素节点，childNodes[0] 获取其文本节点，最后再使用 nodeValue 获取其值。

3. 获取和设置属性

对于 XML 中的元素属性，我们可以使用 getAttribute 和 setAttribute 方法来获取和设置属性值：

易通cmseasy免费的企业建站程序2.0 UTF-8 build 201000510 中文版

易通(企业网站管理系统)是一款小巧,高效,人性化的企业建站程序.易通企业网站程序是国内首款免费提供模板的企业网站系统.§ 简约的界面及小巧的体积：后台菜单完全可以修改成自己最需要最高效的形式；大部分操作都集中在下拉列表框中，以节省更多版面来显示更有价值的数据；数据的显示以Javascript数组类型来输出，减少数据的传输量，加快传输速度。 § 灵活的模板标签及模

下载

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。需要注意的是，在设置属性时，需要指定该属性所属的元素节点以及属性名。

4. 创建元素节点

我们可以使用 createElement 方法在 XML 文档中创建新的元素节点：

const newElement = xmlDoc.createElement("newelement");

这里我们创建了一个名为 newelement 的新元素节点。

5. 添加节点

我们可以使用 appendChild 方法将一个节点添加到另一个节点的子节点列表中：

const element1 = xmlDoc.getElementsByTagName("element1")[0];
element1.appendChild(newElement);

这里我们将新创建的 newelement 添加到 element1 的子节点列表中。

6. 删除节点

我们可以使用 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 = `


  content1
  content2
  
    subcontent1
    subcontent2
  
`;
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 内容：

   newcontent1
   content2
   
      subcontent1
   

结语

通过使用 JavaScript 的 DOM 对 XML 进行修改操作，我们可以轻松地添加、删除、修改其中的元素和属性。需要注意的是，XML 的结构比较灵活，并且可以嵌套多层，因此在修改 XML 时需要根据具体情况进行节点操作。通过学习本文所介绍的 DOM 修改 XML 的基本操作，相信读者可以灵活地使用 JavaScript 对 XML 进行修改，提升开发效率。