`

document.createDocumentFragment

 
阅读更多

documentFragment 是一個無父對象的document對象.

他支持以下DOM2方法: 
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 
也支持以下DOM2屬性: 
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent. 
其他方法可以將documentFragment 作為一個參數,(比如Node的 appendChild和insertBefore 方法),這樣,fragment 就可以被追加到父對象中。 
Example:

var frag = document.createDocumentFragment(); 
frag.appendChild(document.createTextNode('Ipsum Lorem')); 
document.body.appendChild(frag); 
 document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
分享到:
评论

相关推荐

    JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    ### JavaScript性能优化之创建文档碎片(document.createDocumentFragment) 在探讨`document.createDocumentFragment()`方法之前,我们首先需要理解浏览器在处理DOM(文档对象模型)节点插入时的基本行为。DOM是HTML...

    浅析document.createDocumentFragment()与js效率

    使用document.createDocumentFragment()方法可以创建一个DocumentFragment对象。创建后,你可以将多个元素添加到该对象中。一旦所有的操作都完成,你可以将DocumentFragment一次性地附加到DOM树上。与逐个添加节点到...

    关于javascript document.createDocumentFragment()

    `document.createDocumentFragment()`是JavaScript中的一个非常有用的API,它允许开发者在不实际修改DOM树的情况下构建和操作一组节点。这个方法返回一个无父节点的`DocumentFragment`对象,可以被视为一个临时的、...

    一些高性能的Javascript代码.doc

    var frag = document.createDocumentFragment(); for (var i = 0; i ; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 2...

    JavaScript执行效率优化及内存管理优化.docx

    var frag = document.createDocumentFragment(); for (var i = 0; i ; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 1.1.2 ...

    document 文挡对象详解

    - `document.createDocumentFragment()`:创建一个不附加到文档的文档片段,用于存储和操作元素集合。 - `innerHTML`:获取或设置元素及其所有子元素的HTML。 - `outerHTML`:获取或设置元素的HTML,包括其开始...

    JS提高优化性能完全秘籍.pdf

    var frag = document.createDocumentFragment(); for (var i = 0; i ; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 通过...

    脚本动态创建复选框,添加事件

    `document.createDocumentFragment()`函数用于创建一个新的文档碎片。文档碎片是一个特殊的DOM节点,可以包含多个子节点,但不会直接显示在页面上。使用文档碎片可以提高DOM操作的效率,因为它可以将多个DOM操作合并...

    js中的DocumentFragment1

    创建 DocumentFragment 可以使用 document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment。 DocumentFragment 的属性继承自 Node,並补充了 ParentNode 接口中的属性。例如,ParentNode...

    xmldom属性与方法详解[参照].pdf

    `xmlDocument.createDocumentFragment()` 返回一个空的文件片断,可以用于存储将要插入XML文档的一组节点。使用插入方法如`insertBefore`、`replaceChild`或`appendChild`将片段插入文档。 8. `createElement` ...

    documen对象参考手册使用详解

    10. **DOM遍历与操作**:`document.createDocumentFragment()`创建一个文档片段,可用来批量添加元素而不立即触发重绘。`Node`接口提供了如`appendChild()`, `removeChild()`, `replaceChild()`等方法,用于操作DOM...

    大师讲DOM

    8. **性能优化**:大量DOM操作可能导致页面重绘和回流,合理使用`document.createDocumentFragment()`和`textContent`代替.innerHTML,以及批量修改可以减少性能影响。 在实际开发中,DOM操作经常结合Ajax(异步...

    比较详细的XMLDOM对象方法详解第1/2页

    xmlDocument.createDocumentFragment(); ``` **说明:** 新创建的文档片段对象并不自动成为文档的一部分,需要使用其他方法(如 `appendChild`, `insertBefore`, `replaceChild` 等)将其添加到文档树中。 **示例...

    使用Mootools动态添加Css样式表代码,兼容各浏览器

    但是这样做就不利于插件的移植,所以就写了这个函数用来动态产生Css.... }else{ var Frag=document.createDocumentFragment(); Frag.appendChild(document.createTextNode(c)); Sty.appendChild(Frag); } document.get

    dom-lite:一个小的DOM实现,其中实现了文档中的大多数DOM属性和方法

    createDocumentFragment ( ) ; var text1 = document . createTextNode ( "hello" ) ; var text2 = document . createTextNode ( " world" ) ; fragment . appendChild ( text1 ) ; fragment . appendChild

    mui选项卡切换和下拉刷新加载数据列表代码.zip

    var fragment = document.createDocumentFragment(); var li; for (var i = 0; i ; i ) { li = document.createElement('li'); li.className = 'mui-table-view-cell'; li[removed] = '第' (index 1) '个选项...

Global site tag (gtag.js) - Google Analytics