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