关于javascript document.createDocumentFragment()

下面是关于 document.createDocumentFragment() 的详细攻略：

简介

document.createDocumentFragment() 方法创建并返回了一个空文档节点 DocumentFragment。DocumentFragment 可以看作是一个轻量级的文档对象，可以用来在文档的 DOM 结构上进行操作，而不会对文档本身产生影响。通常情况下，我们可以使用 DocumentFragment 来优化 DOM 操作的性能。

语法

var fragment = document.createDocumentFragment();

示例说明

示例1：使用 DocumentFragment 创建大量节点

如果我们要在 DOM 结构中创建大量的节点，使用传统的方法，直接将这些节点插入到文档中，是相对低效的，因为每次插入都会让浏览器去重新渲染页面。而如果我们先将这些节点放到 DocumentFragment 中，然后将这个 DocumentFragment 插入到文档中，就只会触发一次渲染，这样可以大大提高性能。

下面是一个示例：

var frag = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {
  var li = document.createElement("li");
  li.textContent = "Item " + i;
  frag.appendChild(li);
}

document.querySelector("#list").appendChild(frag);

在这个代码中，我们创建了一个 DocumentFragment，然后循环创建 1000 个 <li> 元素，将这些元素添加到 DocumentFragment 中，最后将整个 DocumentFragment 插入到文档中。这样，只触发了一次渲染，而不是每次循环都去重新渲染一次。

示例2：将 DocumentFragment 中的节点拷贝到另一个节点中

在某些场景下，我们需要将一个节点中的子元素拷贝到另一个节点中。直接遍历这个节点中的所有子元素，逐个将它们插入到目标节点中，会比较繁琐。使用 DocumentFragment 则可以很方便地解决这个问题。

下面是一个示例：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<div id="container"></div>

var frag = document.createDocumentFragment();
var list = document.getElementById("list");
var container = document.getElementById("container");

// 将 list 节点中的所有子元素拷贝到 frag 中
while (list.firstChild) {
  frag.appendChild(list.firstChild);
}

// 将 frag 插入到 container 中
container.appendChild(frag);

在这个代码中，我们首先创建了一个空的 DocumentFragment，然后使用 while 循环将 list 中的子元素逐个取出，将它们添加到 DocumentFragment 中。最后，将整个 DocumentFragment 插入到 container 中。这样，我们就完成了将 list 中的子元素拷贝到 container 中的操作。