解析和序列化 XML

有時，您可能需要解析XML內容並將其轉換為DOM樹，或者反過來，將現有的 DOM 樹序列化為 XML。在本文中，我們將介紹 Web 平臺提供的物件，使 XML 的序列化和解析等常見任務變得簡單。

XMLSerializer

序列化 DOM 樹，將其轉換為包含 XML 的字串。

DOMParser

透過解析包含 XML 的字串構造 DOM 樹，根據輸入資料返回XMLDocument或Document。

fetch()

從 URL 載入內容。XML 內容作為文字字串返回，您可以使用DOMParser進行解析。

XMLHttpRequest

fetch()的前身。與fetch() API 不同，XMLHttpRequest可以透過其responseXML屬性將資源作為Document返回。

XPath

一種用於建立包含 XML 文件特定部分地址的字串，並根據這些地址定位 XML 節點的技術。

建立 XML 文件

使用以下方法之一建立 XML 文件（它是Document的例項）。

將字串解析為 DOM 樹

此示例使用DOMParser將字串中的 XML 片段轉換為 DOM 樹。

js
const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// print the name of the root element or error message
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  console.log("error while parsing");
} else {
  console.log(doc.documentElement.nodeName);
}

將可透過 URL 訪問的資源解析為 DOM 樹

使用 fetch

以下程式碼示例將可透過 URL 訪問的 XML 檔案讀取並解析為 DOM 樹。

js
fetch("example.xml")
  .then((response) => response.text())
  .then((text) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(text, "text/xml");
    console.log(doc.documentElement.nodeName);
  });

此程式碼將資源作為文字字串獲取，然後使用DOMParser.parseFromString()構建XMLDocument。

如果文件是HTML，則上面顯示的程式碼將返回Document。如果文件是 XML，則結果物件實際上是XMLDocument。這兩種型別本質上是相同的；區別主要是歷史原因，儘管區分也有一些實際的好處。

注意：實際上還有一個HTMLDocument介面，但它不一定是獨立的型別。在某些瀏覽器中它是，而在其他瀏覽器中它是Document介面的別名。

序列化 XML 文件

給定Document，您可以使用XMLSerializer.serializeToString()方法將文件的 DOM 樹序列化回 XML。

使用以下方法序列化您在上一節中建立的 XML 文件的內容。

將 DOM 樹序列化為字串

首先，如使用文件物件模型中所述建立 DOM 樹。或者，使用從fetch()獲得的 DOM 樹。

要將 DOM 樹doc序列化為 XML 文字，請呼叫XMLSerializer.serializeToString()

js
const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

序列化 HTML 文件

如果您擁有的 DOM 是 HTML 文件，則可以使用serializeToString()進行序列化，但還有一個更簡單的選項：只需使用Element.innerHTML屬性（如果您只需要指定節點的後代）或Element.outerHTML屬性（如果您需要節點及其所有後代）。

js
const docInnerHtml = document.documentElement.innerHTML;

因此，docInnerHtml是一個包含文件內容 HTML 的字串；即<body>元素的內容。

您可以使用以下程式碼獲取與<body>和其後代相對應的 HTML

js
const docOuterHtml = document.documentElement.outerHTML;

另請參閱