JavaScript高级程序设计（三）浏览器对 XML DOM 的支持

前言：

浏览器对 XPath 的支持 …XML 曾一度是在互联网上存储和传输结构化数据的标准。XML 的发展反映了 Web 的发展，因为
DOM 标准不仅是为了在浏览器中使用，而且还为了在桌面和服务器应用程序中处理 XML 数据结构。在
没有 DOM 标准的时候，很多开发者使用 JavaScript 编写自己的 XML 解析器。自从有了 DOM 标准，所
有浏览器都开始原生支持 XML、XML DOM 及很多其他相关技术。

1 浏览器对 XML DOM 的支持

因为很多浏览器在正式标准问世之前就开始实现 XML 解析方案，所以不同浏览器对标准的支持不
仅有级别上的差异，也有实现上的差异。DOM Level 3 增加了解析和序列化能力。不过，在 DOM Level 3
制定完成时，大多数浏览器也已实现了自己的解析方案。

1.1 DOM Level 2 Core

可以像下面这样创建空 XML 文档：

let xmldom = document.implementation.createDocument(namespaceUri, root, doctype);  

在 JavaScript 中处理 XML 时，root 参数通常只会使用一次，因为这个参数定义的是 XML DOM
中 document 元素的标签名。namespaceUri 参数用得很少，因为在 JavaScript 中很难管理命名空间。
doctype 参数则更是少用。
要创建一个 document 对象标签名为的新 XML 文档，可以使用以下代码：

let xmldom = document.implementation.createDocument("", "root", null);  
console.log(xmldom.documentElement.tagName); // "root"  
let child = xmldom.createElement("child");  
xmldom.documentElement.appendChild(child);  

这个例子创建了一个 XML DOM 文档，该文档没有默认的命名空间和文档类型。注意，即使不指定

命名空间和文档类型，参数还是要传的。命名空间传入空字符串表示不应用命名空间，文档类型传入
null 表示没有文档类型。xmldom 变量包含 DOM Level 2 Document 类型的实例，包括第 12 章介绍的.1 浏览器对 XML DOM 的支持 695
所有 DOM 方法和属性。在这个例子中，我们打印了 document 元素的标签名，然后又为它创建并添加
了一个新的子元素。
要检查浏览器是否支持 DOM Level 2 XML，可以使用如下代码：

let hasXmlDom = document.implementation.hasFeature("XML", "2.0");  

实践中，很少需要凭空创建 XML 文档，然后使用 DOM 方法来系统创建 XML 数据结构。更多是把
XML 文档解析为 DOM结构，或者相反。因为 DOM Level 2并未提供这种功能，所以出现了一些事实标准。

1.2 DOMParser 类型

Firefox 专门为把 XML 解析为 DOM 文档新增了 DOMParser 类型，后来所有其他浏览器也实现了该
类型。要使用 DOMParser，需要先创建它的一个实例，然后再调用 parseFromString()方法。这个方
法接收两个参数：要解析的 XML 字符串和内容类型（始终应该是"text/html"）。返回值是 Document
的实例。来看下面的例子：

let parser = new DOMParser();  
let xmldom = parser.parseFromString("<root><child/></root>", "text/xml");  
console.log(xmldom.documentElement.tagName); // "root"  
console.log(xmldom.documentElement.firstChild.tagName); // "child"  
let anotherChild = xmldom.createElement("child");  
xmldom.documentElement.appendChild(anotherChild);  
let children = xmldom.getElementsByTagName("child");  
console.log(children.length); // 2

这个例子把简单的 XML 字符串解析为 DOM 文档。得到的 DOM 结构中是 document 元素，
它有个子元素。然后就可以使用 DOM 方法与返回的文档进行交互。
DOMParser 只能解析格式良好的 XML，因此不能把 HTML 解析为 HTML 文档。在发生解析错误时，
不同浏览器的行为也不一样。Firefox、Opera、Safari 和 Chrome 在发生解析错误时，parseFromString()
方法仍会返回一个 Document 对象，只不过其 document 元素是，该元素的内容为解
析错误的描述。下面是一个解析错误的示例：

<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">XML  
Parsing Error: no element found Location: file:// /I:/My%20Writing/My%20Books/  
Professional%20JavaScript/Second%20Edition/Examples/Ch15/DOMParserExample2.js Line  
Number 1, Column 7:<sourcetext><root> ------^</sourcetext></parsererror>  

Firefox 和 Opera 都会返回这种格式的文档。Safari 和 Chrome 返回的文档会把元素
嵌入在发生解析错误的位置。早期 IE 版本会在调用 parseFromString()的地方抛出解析错误。由于
这些差异，最好使用 try/catch 来判断是否发生了解析错误，如果没有错误，则通过 getElements
ByTagName()方法查找文档中是否包含元素，如下所示：

let parser = new DOMParser(),  
 xmldom,  
 errors;  
try {  
 xmldom = parser.parseFromString("<root>", "text/xml");  
 errors = xmldom.getElementsByTagName("parsererror");  
 if (errors.length > 0) { 
 throw new Error("Parsing error!");  
 }  
} catch (ex) {  
 console.log("Parsing error!");  
}  

这个例子中解析的 XML 字符串少一个标签，因此会导致解析错误。IE 此时会抛出错误。
Firefox 和 Opera 此时会返回 document 元素为的文档，而在 Chrome 和 Safari 返回的文
档中，是的第一个子元素。调用 getElementsByTagName(“parsererror”)
可适用于后两种情况。如果该方法返回了任何元素，就说明有错误，会弹警告框给出提示。当然，此时
可以进一步解析出错误信息并显示出来。

1.3 XMLSerializer 类型

与 DOMParser 相对，Firefox 也增加了 XMLSerializer 类型用于提供相反的功能：把 DOM 文档
序列化为 XML 字符串。此后，XMLSerializer 也得到了所有主流浏览器的支持。
要序列化DOM文档，必须创建XMLSerializer 的新实例，然后把文档传给serializeToString()
方法，如下所示：

let serializer = new XMLSerializer();  
let xml = serializer.serializeToString(xmldom);  
console.log(xml);  

serializeToString()方法返回的值是打印效果不好的字符串，因此肉眼看起来有点困难。
XMLSerializer 能够序列化任何有效的 DOM 对象，包括个别节点和 HTML 文档。在把 HTML 文
档传给 serializeToString()时，这个文档会被当成 XML 文档，因此得到的结果是格式良好的。
注意 如果给 serializeToString()传入非 DOM 对象，就会导致抛出错误。

总结

以上就是今天的JavaScript高级程序设计（三）浏览器对 XML DOM 的支持
会持续更新中…
原创不易，期待您的点赞关注与转发评论😜😜