javascript - jQuery.parseHTML()的第二个参数如何使用?
大家讲道理
大家讲道理 2017-04-10 12:45:52
0
1
393
parseHTML: function( data, context, keepScripts )

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

모든 응답(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()

明白了吧,而 createDocuemntFragmentdocument 的一个方法,所以第二个参数必须提供 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/


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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!