DocumentFragment 作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。
如果 频繁改动 document 树，页面加载会变慢，使用 虚拟dom(DocumentFragment) 来记录全部的元素节点，html 只渲染一部分元素节点，这样可以减轻html的加载。
属性：
| childElementCount | 返回所有属于 DocumentFragment 的 Element 类型的子对象。 |
| children | 返回一个实时的 HTMLCollection，其中包含了所有属于 DocumentFragment 的 Element 类型的子对象。 |
| firstElementChild | 返回 DocumentFragment 的第一个 Element 类型的子对象，如果没有则返回 null。 |
| lastElementChild | 返回 DocumentFragment 的最后一个 Element 类型的子对象，如果没有则返回 null。 |
方法：
| append() | 在文档片段的最后一个子对象后插入一组 Node 或字符串对象。 |
| prepend() | 在文档片段的第一个元素前插入一组 Node 或字符串对象。 |
| querySelector() | 返回在 DocumentFragment 中以文档顺序排列的第一个符合指定选择器的 Element 节点。 |
| querySelectorAll() | 返回在 DocumentFragment 中所有的符合指定选择器的 Element 节点组成的 NodeList 数组。 |
| getElementById() | 返回在 DocumentFragment 中以文档顺序排列的第一个符合指定 ID 选择器的 Element 节点。与 Document.getElementById() 作用相同。 |
参考资料：
DocumentFragment - Web APIs | MDN (mozilla.org)
HTML DOM createDocumentFragment() 方法 | 菜鸟教程 (runoob.com)
HTML DOM Document createDocumentFragment() 方法 (w3school.com.cn)
)
