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) 在探讨`document.createDocumentFragment()`方法之前,我们首先需要理解浏览器在处理DOM(文档对象模型)节点插入时的基本行为。DOM是HTML...
使用document.createDocumentFragment()方法可以创建一个DocumentFragment对象。创建后,你可以将多个元素添加到该对象中。一旦所有的操作都完成,你可以将DocumentFragment一次性地附加到DOM树上。与逐个添加节点到...
`document.createDocumentFragment()`是JavaScript中的一个非常有用的API,它允许开发者在不实际修改DOM树的情况下构建和操作一组节点。这个方法返回一个无父节点的`DocumentFragment`对象,可以被视为一个临时的、...
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...
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.createDocumentFragment()`:创建一个不附加到文档的文档片段,用于存储和操作元素集合。 - `innerHTML`:获取或设置元素及其所有子元素的HTML。 - `outerHTML`:获取或设置元素的HTML,包括其开始...
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操作合并...
创建 DocumentFragment 可以使用 document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment。 DocumentFragment 的属性继承自 Node,並补充了 ParentNode 接口中的属性。例如,ParentNode...
`xmlDocument.createDocumentFragment()` 返回一个空的文件片断,可以用于存储将要插入XML文档的一组节点。使用插入方法如`insertBefore`、`replaceChild`或`appendChild`将片段插入文档。 8. `createElement` ...
10. **DOM遍历与操作**:`document.createDocumentFragment()`创建一个文档片段,可用来批量添加元素而不立即触发重绘。`Node`接口提供了如`appendChild()`, `removeChild()`, `replaceChild()`等方法,用于操作DOM...
8. **性能优化**:大量DOM操作可能导致页面重绘和回流,合理使用`document.createDocumentFragment()`和`textContent`代替.innerHTML,以及批量修改可以减少性能影响。 在实际开发中,DOM操作经常结合Ajax(异步...
xmlDocument.createDocumentFragment(); ``` **说明:** 新创建的文档片段对象并不自动成为文档的一部分,需要使用其他方法(如 `appendChild`, `insertBefore`, `replaceChild` 等)将其添加到文档树中。 **示例...
但是这样做就不利于插件的移植,所以就写了这个函数用来动态产生Css.... }else{ var Frag=document.createDocumentFragment(); Frag.appendChild(document.createTextNode(c)); Sty.appendChild(Frag); } document.get
createDocumentFragment ( ) ; var text1 = document . createTextNode ( "hello" ) ; var text2 = document . createTextNode ( " world" ) ; fragment . appendChild ( text1 ) ; fragment . appendChild
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) '个选项...