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 对象，就会导致抛出错误。
伪原创工具 SEO网站优化 https://www.237it.com/
作者：张清悠
链接：https://juejin.cn/post/7035477262472331294