//convert string to xml object
function String2XML(xmlString) {
// for IE
if (window.ActiveXObject) {
var xmlobject = new ActiveXObject("Microsoft.XMLDOM");
xmlobject.async = "false";
xmlobject.loadXML(xmlstring);
return xmlobject;
}
// for other browsers
else {
var parser = new DOMParser();
var xmlobject = parser.parseFromString(xmlstring, "text/xml");
return xmlobject;
}
}
//convert xml object to string
function XML2String(xmlObject) {
// for IE
if (window.ActiveXObject) {
return xmlobject.xml;
}
// for other browsers
else {
return (new XMLSerializer()).serializeToString(xmlobject);
}
} 一、了解DOMParser方法
DOMParser可以让 HTML 字符串解析为DOM树，格式类型包括 XML 文档，或者HTML文档。
语法
var domParser = new 此时
domParser
就是一个DOMParser对象。
DOMParser对象包含一个名为parseFromString的方法。
该方法语法如下：
var 这个方法根据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对象有一个名为
serializeToString()
的方法，可以返回序列化的xml字符串。
语法如下：
var 返回值是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()
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，优秀的框架创造者，这样的学习是必不可少的。
参考文档：
- MDN-DOMParser
- MDN-XMLSerializer