使用文档碎片（DocumentFragments）追加DOM元素

标签（空格分隔）： JavaScript


DocumentFragment接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的Document使用，用于存储已排好版的或尚未打理好格式XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow)，且不会导致性能等问题。

最常用的方法是使用文档片段作为参数（例如，任何Node接口类似Node.appendChild和Node.insertBefore的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点，而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染操作，而不是每个节点分别被插入到文档中，因为后者会发生多次渲染的操作。

该接口在Web组件中也非常有用：模板元素在其HTMLTemplateElement.content属性中包含了一个DocumentFragment。

可以使用document.createDocumentFragment方法或者构造函数来创建一个空的DocumentFragment。

一、属性

该接口没有特殊的属性，其属性否继承自Node，并补充了ParentNode接口接口中的属性。

ParentNode.children [只读][实验属性]

返回一个实时（live）HTMLCollection，包含所有属于DocumentFragment的元素类型的子对象。

ParentNode.firstElementChild [只读][实验属性]

返回DocumentFragment的第一个Element类型的子对象，如果没有则返回null。

ParentNode.lastElementChild [只读][实验属性]

返回DocumentFragment的最后一个Element类型的子对象，如果没有则返回null。

ParentNode.childElementCount [只读][实验属性]

返回一个无符号长整型，给出DocumentFragment所有子项的数量。

二、构造函数

DocumentFragment() [实验属性]

返回空的DocumentFragment对象。

三、方法

该接口继承Node的全部方法，并实现了ParentNode接口的方法。

DocumentFragment.find() [实验属性]

返回DocumentFragment树里第一个匹配的元素Element。

DocumentFragment.findAll() [实验属性]

返回DocumentFragment树里所有匹配的元素NodeList。

DocumentFragment.querySelector()

返回DocumentFragment中的第一个元素节点，按照文档顺序，并与指定的选择器匹配。

DocumentFragment.querySelectorAll()

DocumentFragment.getElementById()

四、兼容性

Desktop

| 特性 | Chrome | FireFox | IE | Opera | Safari |

|: ----- |: ----- |: ----- |: ----- |: ----- |: ----- |

| 基本支持 | 1.0 | 1.0 | Yes | Yes | Yes |

| querySelector() querySelectorAll() | 1.0 | 3.5 | 8.0 | 10.0 | 3.2(525.3) |

| find() findAll() | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 |

| DocumentFragment() 构造函数 | 28.0 | 24.0 | 不支持 | 15.0 | 不支持 |

| ParentNode 属性 | 28.0 | 24.0 | 不支持 | 15.0 | 不支持 |

| ParentNode 方法 | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 |

Mobile

| 特性 | Android | Firefox Mobile | IE Mobile | Opera Mobile | Safari Mobile |

|: ----- |: ----- |: ----- |: ----- |: ----- |: ----- |

| 基本支持 | Yes | 1.0 | Yes | Yes | Yes |

| querySelector() querySelectorAll() | 2.1 | 3.5 | 8.0 | 10.0 | 3.2(525.3) |

* 其余实验属性参见原文

五、示例

当我们要想document中添加大量DOM节点时，如果循环插入，会出现明显的性能问题。我们也可以创建个新节点，比如说div，然后将div一次性插入document中，但是这样会多加一层div，而文档碎片（DocumentFragment）不会产生这种节点。

var docFragment = document.createDocumentFragment();

for (var i = counts; i > 0; i--) {
    var node = document.createElement(‘p‘);
    var node_text = document.createTextNode(i + ‘, hehe‘);

    node.appendChild(node_text);

    docFragment.appendChild(node);
}

document.body.appendChild(docFragment);

Last updated by: Jehorn, Dec 26, 2017, 11:20 AM

原文地址：https://www.cnblogs.com/jehorn/p/8117100.html

时间： 2024-08-06 18:18:39

使用文档碎片（DocumentFragments）追加DOM元素的相关文章

【JS学习笔记】DOM操作应用-创建、插入和删除元素；文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

有关文档碎片（document fragment）的使用方法

通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导 致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意 味着将DOM的改变分批处理.并在"活动"文档树之外运行这些更新. 当须要创建一个相对照较大的子树.应该在子树全然创建之后再将子树加入到DOM树中. 这时採用文档碎片技术来容纳全部的节点. //反样例 //在创建时马上加入节点 var p,t; p = document.createElement('p'); t

有关文档碎片（document fragment）的用法

通常情况下修改.删除或者增加DOM元素.更新DOM会导致浏览器重新绘制屏幕,也会导 致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量减少更新DOM,这也就意 味着将DOM的改变分批处理,并在"活动"文档树之外执行这些更新. 当需要创建一个相对比较大的子树,应该在子树完全创建之后再将子树添加到DOM树中, 这时采用文档碎片技术来容纳所有的节点. //反例子 //在创建时立即添加节点 var p,t; p = document.createElement('p'); t =

DocumentFragment(创建文档碎片节点)

使用DocumentFragment进行缓存操作,引发一次回流和重绘: 在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中添加大量数据是,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会调用父节点的appendChild()方法,为了解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到document中. 假如想创建十个段落,使用常规的方式可能会写出这样的代码: 1 2 3 4 5 6 for(var

js文档碎片

今天看视频发现个有意思的东西,叫做文档碎片?文档碎片是什么呢?先卖个关子. 平常我们在向文档中插入节点的时候可能创建了节点就马上插入父元素,因此浏览器会一直渲染.插入的数量少可能还没影响,可是当插入的节点成千上万的时候,会发现浏览器卡顿了......如何解决这种问题呢?这里我们就要用到文档碎片了.在创建节点之后我们可以先把节点append在文档碎片上,在将所有的节点append之后再将文档碎片append在父元素上,理论上会快一些.经测试,有些时候要快一点^_^...... 1.普通插入 <in

使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta htt

js性能优化篇创建文档碎片

大家都知道,大量的操作DOM会引起页面的渲染变慢,文档碎片是指一个临时的文档,把创建的dom放到文档里面,不要每次操作都操作DOM,提高页面的效率.下面我们就来看一下如何运用创建文档碎片. 首先,我们了解下向页面创建dom发生了什么. for(var i=0;i<5000;i++){ var oSpan=document.createElement('span') document.body.appendChild(oSpan) } 如果我们向以上代码一样,向页面插入很多dom元素,这种渲染的过

谈谈对文档碎片的理解

js操作DOM时发生了什么? js每次操作DOM都出发了回流,这非常的消耗性能. 什么是文档碎片容器? document.createDocumentFrgement()----用于暂时存放创建的DOM元素. 文档碎片容器有什么用? 将需要添加到body中的元素先添加到碎片容器中,再把碎片容器插入到对应的位置,这样可以减少DOM操作,提高性能. 原文地址:https://www.cnblogs.com/wuqilang/p/11253627.html

jQuery 文档碎片处理

通过JS操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement,createTextNode,然后用appendChild把文本节点和容器节点绑定在一起,然后再用appendChild或insertBefor添加到DOM树中.但如果要往DOM树中动态添加大量的节点.就会很麻烦.而且每次都会刷新DOM,造成性能上的缺陷. 解决方法是使用文档碎片这个方法创建文档碎片. 我个人觉得应该把这个翻译成文档片段比较合适. 使用jQuery解决方案. <span style="