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 基本結構如下所示：

<?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 編寫程式碼對這棵節點樹進行修改操作。

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 方法來取得和設定屬性值：

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 = `
<?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中文網其他相關文章！