DocumentFragment 接口(document文件夹)

DocumentFragment接口表示文档的片段。它包含一组 DOM 节点，这些节点与文档树没有关联，但可以通过

appendChild()

方法附加到文档中。

创建 DocumentFragment

使用

createDocumentFragment()

方法创建

DocumentFragment

对象：


const fragment = document.createDocumentFragment();


向 DocumentFragment 添加节点

可以使用以下方法向

DocumentFragment

添加节点：

• 
appendChild()

  ：添加单个节点
• 
insertBefore()

  ：在指定节点之前添加节点
• 
replaceChild()

  ：用一个新节点替换现有节点
• 
cloneNode()

  ：克隆现有节点并将其添加到片段中


fragment.appendChild(newElement);


将 DocumentFragment 添加到文档

要将

DocumentFragment

添加到文档中，可以使用

appendChild()

方法：


document.body.appendChild(fragment);


优点

使用

DocumentFragment

有几个优点：

• 减少 DOM 操作：一次性创建和修改节点，有助于提高性能。
• 内存效率：将节点存储在内存中，直到准备好添加到文档中，有助于减少内存使用。
• 线程安全：可以在不锁定 DOM 的情况下修改文档片段，从而提高并发性。

示例

以下示例使用

DocumentFragment

创建一个简单的表格并将其添加到文档中：


const fragment = document.createDocumentFragment();// 创建行并添加单元格const row = document.createElement('tr');const cell1 = document.createElement('td');const cell2 = document.createElement('td');cell1.textContent = '姓名';cell2.textContent = '年龄';row.appendChild(cell1);row.appendChild(cell2);// 添加行到片段fragment.appendChild(row);// 将片段添加到文档document.body.appendChild(fragment);


结论


DocumentFragment

接口提供了一种高效、灵活的方式来修改文档。通过创建文档片段，开发人员可以一次性更新多个节点，从而提高性能和可维护性。