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

另请参阅