js 文档片段 DocumentFragment

        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)