1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jquery 文档碎片DocumentFragment

作者:用户 来源:互联网 时间:2016-08-03 17:54:54

文档方法节点文档节点一个c#子孙节点创建节点dommanipcdatasectionjQuery代码片段createDocumentFragmentjquery克隆节点DocumentFragment文档碎片

jquery 文档碎片DocumentFragment - 摘要: 本文讲的是jquery 文档碎片DocumentFragment, 文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的

文档碎片是什么?
参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用。
  createDocumentFragment有什么作用 多次使用节点方法(如:appendChild)绘制页面,每次都要刷新页面一次。效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要一次页面刷新就可以了。
  DocumentFragment类型 在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段(documentfragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。DocumentFragment节点具有下列特征: 1. nodeType的值为11 2. nodeName的值为“#document-fragment” 3. nodeValue的值为 null 4. parentNode的值为 null 5. 子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference 虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段,可以使用 document.createDocumentFragment()方法,如下所示: var fragment = document.createDocumentFragment(); 文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应的位置上;文档片段本身永远不会称为文档树的一部分。   createElement与createDocumentFragment createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段。 DocumentFragment 接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。 DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。 不过它有一种特殊的行为,该行为使得它非常有用: 即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作,尤其是与 Range 接口一起使用时更是如此。 可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。 也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 获取包含现有文档的片段的 DocumentFragment 节点。 除此之外,createElement创建的元素可以使用innerHTML,createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果,只是作为一个属性而已。两者的节点类型完全不同,并且createDocumentFragment创建的元素在文档中没有对应的标记,因此在页面上只能用js中访问到。
  createElement创建的元素可以重复操作,添加之后就算从文档里面移除依旧归文档所有,可以继续操作,但是createDocumentFragment创建的元素是一次性的,添加之后再就不能操作了,在之前domManip方法中提到的iNoClone多个节点操作需要克隆,就是因为文档碎片的特性引起的,大体了解了,我们看看jQuery对于节点操作的时候,加强版的文档碎片buildFragment。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索文档 , 方法 , 节点 , 文档节点 , 一个 , c#子孙节点 , 创建节点 , dommanip , cdatasection , jQuery代码片段 , createDocumentFragment , jquery克隆节点 , DocumentFragment 文档碎片 jquery 文档碎片、jquery创建文档碎片、documentfragment、documentfragment对象、jquery fragment,以便于您获取更多的相关知识。

dom-为什么使用DocumentFragment就不会重新布局?

问题描述 为什么使用DocumentFragment就不会重新布局? 文档说DocumentFragment很好,效率高,append的时候不会重新布局,理由是,他不是document tree的一部分 我的疑惑是,document.cteate("DIV")这样出...

关于javascript document.createDocumentFragment()_javascript技巧

...nt, parentNode, prefix, previousSibling, textContent. 其他方法可以將documentFragment 作為一個參數,(比如Node的 appendChild和insertBefore 方法),這樣,fragment 就可以被追加到父對象中。 Example: 复制代码 代码如下: var frag = document.createDocumentFra...

PJAX,站点加速之翼

pjax 是一款可爱的 jQuery 小插件,将 ajax 和浏览器的 pushState API 封装到一起,解决了单纯使用 ajax 进行无刷新加载时对搜索引擎的不友好,并且节省了 HTTP 开支、提高了浏览速度,明显地优化了用户体验。 前一段时间在 laravel chin...

探寻Javascript执行效率问题

...tyle属性(for certain同学推荐)大量添加元素到页面时使用documentFragment  例如 复制代码 代码如下:for(var i=0;i

js文档碎片---DocumentFragment

...片可以当作仓库,缓存使用。 看例子代码: DocumentFragment文档碎片 function a1() { var time1 =( +new Date()); for (var i = 0; i < 5000; i++) { var op = document.createElement("span"); var oText = document.cre...

前三篇
后三篇