解析或序列化 XML

有时，你可能需要解析 XML 内容，并把它转换为 DOM 树，或者，反过来将现有的 DOM 树序列化成 XML。在本文中，我们将了解 web 平台提供的对象，以便轻松地完成序列化和解析 XML 的常见任务。


           XMLSerializer

序列化 DOM 树，把它们转换成包含 XML 的字符串。


           DOMParser

通过解析一个包含 XML 的字符串来构建 DOM 树，返回一个基于输入数据的适当的 XMLDocument 或者是 Document 。


           XMLHttpRequest

从一个 URL 中加载内容；XML 的内容被作为一个带有内建 XML 的 DOM 树的 XML 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");
// 打印根元素的名称或错误信息
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  console.log("error while parsing");
} else {
  console.log(doc.documentElement.nodeName);

把可寻址的 URL 资源解析成 DOM 树

使用 XMLHttpRequest

下列示例代码读取一个可寻址的 URL 资源文件，并将其解析成 DOM 树：

const xhr = new XMLHttpRequest();
xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
xhr.onerror = () => {
  dump("Error while getting XML.");
xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();
在 xhr 对象 responseXML 字段中返回的值是一个通过解析 XML 构造的 Document。
如果这个文档是 HTML，上面实例代码将会返回一个 Document。如果它是 XML，那获取的结果对象实际上是一个 XMLDocument。这两种类型实质上是一样的，不同点大部分是历史遗留的，尽管区分它们也会有一些实际好处。
  备注： 事实上，HTMLDocument 也是一个接口，但是它不必是一个独立的类型。在一些浏览器上它是，但在另外一些浏览器上它仅仅是 Document 接口的别名。

`序列化一个 XML 文档`

给定一个 Document ，你可以使用 XMLSerializer.serializeToString() 方法把文档的 DOM 树序列化为 XML。


          
           使用下面的方法来序列化在先前章节中创建的 XML 文档内容。

`把 DOM 树序列化成字符串`

首先，使用如何创建一个 DOM 树中的方法构建一个 DOM 树。也可以使用从 XMLHttpRequest 中获得的 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;
因此，docInnerHtmlL 是一个包含 HTML 内容的文档的字符串，换句话来说，也是 <body> 元素的内容。
你可以使用以下代码得到 <body> 和它的后代对应的 HTML：