javascript - jQuery.parseHTML()的第二个参数如何使用？

Question

parseHTML: function( data, context, keepScripts )

第二个参数一直未找到使用例子。 按理说能有CreateElement方法的得是Document类型的实例才行，除了document对象，还有其他对象吗？

Answer 1

函数干啥的

这个函数的作用就是把一段 html 字符串变成 DOM。

字符串变成 DOM 的原理

如果只有一个结点，例如

<p>test</p>

这个简单，我们可以用 document.createElement 来把这段 html 变成 DOM，并插入页面文档中，例如：

var d = document.createElement('p');
d.innerHTML = 'test';
document.appendChild(d);

但是，如果 html 字符串复杂一点，有多个结点怎么办呢？

那样我们就创建一个新的结点，然后用 innerHTML 方法把字符串插入到这个结点下，这样，这个 html 代码就变成 DOM 了，例如

var html = '<p><span>node</span></p><p>node2</p>';
var tempp = document.createElement('p');
tempp.innerHTML = html; // 这样 html 就变成 DOM 了
// 把 DOM 插入文档
var nodes = tempp.childNodes;
for (var i=0, length=nodes.length; i<length; i+=1) {
   // 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整
   document.appendChild(nodes[i].cloneNode(true)); 
}

但是，我们这样循环插入结点，在某些“高级“浏览器下，他就抓狂了。

于是，我们就考虑做一个文档片段，然后把这些结点插入到文档片段中，然后一次性塞到 document 下面。这样性能就好多了。例如

var nodes = tempp.childNodes, 
  fragment = document.createDocumentFragment(); //  创建文档片段

for (var i=0, length=nodes.length; i<length; i+=1) {
   // 文档片段加载克隆的节点
   fragment.appendChild(nodes[i].cloneNode(true)); 
}
// 一次性全塞给 document
document.appendChild(fragment);

看到没，代码里面的 document.createDocumentFragment()，这个就是 jQuery 文档描述中的第二个参数的用途。如果不设置第二个参数，那 context 的默认值就是 document，于是就是 document.createDocumentFragment(); 如果你设置了其他的值，那就相当于是 context.createDocumentFragment()。

明白了吧，而 createDocuemntFragment 是 document 的一个方法，所以第二个参数必须提供 document 的部分方法便可。

什么样的对象能作为 jQuery.parseHTML 的第二个参数

阅读源码后，发现 jQuery.parseHTML 还使用了 createDocumentFragment, createTextNode, createElement。只要一个 Object 提供了以上三个接口，并且接口的返回值能够支持 Element 对象的部分接口，该对象便可作为 jQuery.parseHTML 的 context 参数来使用。

总结 应用场景

1.使用 iframe 的 document

可能在某些场景我们需要使用 iframe 下的 document 作为 context，这种情况就需要主动传递该参数给 jQuery.HTML 了。

2.iframe 内使用 parent 的 document

同上……

其实还可以玩点花样，比如 hook 一下，让 jQuery.parseHTML 的时候在结果里面添加 class，增加额外的元素等等。但是要 ES5 支持。这里就不放 demo 了

但是纯文本的话，可以 mock 一个 context.createTextNode，实现在文本前后加额外字符。示例

http://jsfiddle.net/S4SfZ/

---

部分内容参考 http://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/

---

写这么长，我自己都觉得自己无聊啊……