内容简介：byzhangxinxu from本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8756
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
一、了解DOMParser方法
DOMParser可以让HTML字符串解析为DOM树，格式类型包括XML文档，或者HTML文档。
语法
var domParser = new DOMParser();
此时 domParser 就是一个DOMParser对象。
DOMParser对象包含一个名为parseFromString的方法。
该方法语法如下：
var doc = domParser.parseFromString(string, mimeType);
这个方法根据mimeType参数值的不同返回HTML文档或者XML文档。
具体参数如下：
- string
- 必需。字符串。表示被用来解析的DOM字符串（DOMString）。必需包括HTML, xml, xhtml+xml或是svg文档内容，否则可能解析错误。
- mimeType
-
必需。字符串。表示解析的文档类型，支持下表这些参数值：
mimeType值 返回文档类型 text/html Document text/xml XMLDocument application/xml XMLDocument application/xhtml+xml XMLDocument image/svg+xml XMLDocument
其中Document文档类型是会自动包含 <html> 和 <body> 标签的，而XMLDocument文档类型则不会主动添加 <html> 和 <body> 等标签，且根据我的测试很多普通的HTML标签有时候会parseerror解析错误。
举个例子：
var domParser = new DOMParser();
console.dir(domParser.parseFromString('<p>内容</p>', 'text/html'));
此时返回的文档DOM树结构如下截图，出现了DOM字符串参数中没有的 <html> 和 <body> 标签。
但是，如果我们设置的mimeType类型是 text/xml 的话，则又是返回是另外模样的文档树结构：
var domParser = new DOMParser();
console.dir(domParser.parseFromString('<p>内容</p>', 'text/xml'));
控制台输出结果如下图：
兼容性
DOMParser方法IE9+均支持。
二、了解XMLSerializer方法
XMLSerializer方法的作用和DOMParser想法，XMLSerializer可以让DOM树对象序列化为字符串。
语法
var xmlSerializer = new XMLSerializer();
此时 xmlSerializer 就是一个XMLSerializer对象。
XMLSerializer对象有一个名为 serializeToString() 的方法，可以返回序列化的xml字符串。
语法如下：
var xmlString = xmlSerializer.serializeToString(rootNode);
返回值是DOMString类型。
参数
- rootNode
- 必须。用来转换成字符串的DOM树根节点。
例如：
var xmlSerializer = new XMLSerializer();
console.log(xmlSerializer.serializeToString(document.querySelector('.link')));
我在本文对应的控制台运行上面JS代码，结果如下图：
和outerHTML属性区别
serializeToString() 方法和 outerHTML 有些类似，但还是有所区别，主要有有下面两个：
- outerHTML只能作用在Element元素上，但是不能是其他节点类型，例如文本节点，注释节点之类。但是
serializeToString()方法适用于任意节点类型。包括：
节点类型 释义 DocumentType 文档类型 Document 文档 DocumentFragment 文档片段 Element 元素 Comment 注释节点 Text 文本节点 ProcessingInstruction 处理指令 Attr 属性节点 -
serializeToString()方法会给根元素自动增加xmlns命名空间，例如对比下面两种代码输出结果：
div = document.createElement('div'); // 1. console.log(div.outerHTML); // 2. var xmlSerializer = new XMLSerializer(); console.log(xmlSerializer.serializeToString(div));输出结果如下图：
兼容性
DOMParser方法IE9+均支持。
三、应用举例
1. 去除HTML字符串的换行和注释
首先测试HTML如下，放在一个自定义的script模板中：
<script id="tpl" type="text/template">
<!-- 这是注释1 -->
<p>这是文本。</p>
<!-- 这是注释2 -->
<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
</script>
我们平常为了便于阅读，同时维护方便，HTML模板是包含缩进和注释的，但是实际解析和这些是不需要的，需要删除，处理字符串正则替换这种方法以外，还可以试试使用浏览器原生的一些DOM API方法，例如DOMParse，JavaScript代码如下：
var htmlTpl = tpl.innerHTML;
// 字符串转换成文档类型
var domParser = new DOMParser();
var doc = domParser.parseFromString(htmlTpl, 'text/html');
// 使用原生的TreeWalker进行遍历
var treeWalker = document.createTreeWalker(doc);
var arrNodeRemove = [];
// 遍历注释节点和换行文本节点
while(treeWalker.nextNode()) {
var node = treeWalker.currentNode;
if (node.nodeType == Node.COMMENT_NODE || (node.nodeType == Node.TEXT_NODE && node.nodeValue.trim() == '')) {
arrNodeRemove.push(node);
}
}
// 节点移除
arrNodeRemove.forEach(function (node) {
node.parentNode.removeChild(node);
});
// 字符串还原
console.log(doc.body.innerHTML);
// 输出结果是：
// <p>这是文本。</p><ol><li>列表</li><li>列表</li><li>列表</li></ol>
Chrome浏览器截图如下：
可以看到，HTML字符串中注释相关的，以及换行空格都被移除了，使用DOMParser方法的好处是比正则表达式替换更容易理解与上手，由于使用浏览器内置的解析，因此HTML字符容错性更强，使用正则表达式可能无法面面俱到。不足就是代码量相对多一点。
四、结语
今天整理与研究这篇文章时候发现自己还有很多原生的DOM API不是很了解，例如NodeIterator和TreeWalker，都是IE9+浏览器都支持的原生API，以后有机会可以介绍下，虽然现在圈子里关心这类原生DOM API的开发人员占比很低，我们日常使用概率也不高，不过以后如果想要成为creater，优秀的框架创造者，这样的学习是必不可少的。
参考文档：
感谢阅读！
本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8756
（本篇完）
以上所述就是小编给大家介绍的《DOMParser和XMLSerializer两个API简介》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Building Websites with Joomla!
H Graf / Packt Publishing / 2006-01-20 / USD 44.99
This book is a fast paced tutorial to creating a website using Joomla!. If you've never used Joomla!, or even any web content management system before, then this book will walk you through each step i......一起来看看 《Building Websites with Joomla!》 这本书的介绍吧!
