解析和序列化 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 樹。
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 樹的示例程式碼。
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()。
const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);
序列化 HTML 文件
如果您的 DOM 是 HTML 文件，您可以使用 serializeToString() 進行序列化，但還有另一個許多人認為更簡單的方法：使用 Element.innerHTML 屬性（如果您只需要指定節點的子節點）或 Element.outerHTML 屬性（如果您需要節點及其所有子節點）。
const docInnerHtml = document.documentElement.innerHTML;
結果，docInnerHtml 是一個包含文件內容的 HTML 的字串；也就是說，<body> 元素的 [內容]。
您可以使用此程式碼獲取對應於 <body> 及其子節點的 HTML。
const docOuterHtml = document.documentElement.outerHTML;
另見
- XPath
fetch()XMLHttpRequestDocument、XMLDocument和HTMLDocument