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

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

大家讲道理
大家讲道理

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

全部回覆 (1)
阿神

函数干啥的

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

字符串变成 DOM 的原理

如果只有一个结点,例如

test

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

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

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

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

var html = '

node

node2

'; var tempp = document.createElement('p'); tempp.innerHTML = html; // 这样 html 就变成 DOM 了 // 把 DOM 插入文档 var nodes = tempp.childNodes; for (var i=0, length=nodes.length; i

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

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

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

看到没,代码里面的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學習者快速成長!