使用文档碎片（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