解析和序列化 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