深入剖析 DOM：Comment 类型与 DocumentFragment 类型

前端

2023-12-11 07:21:57

在广阔的文档对象模型（DOM）世界中，Comment 类型 和 DocumentFragment 类型 扮演着至关重要的角色，让我们拨开迷雾，深入了解它们的独特功能。

Comment 类型：幕后的注解

想象一下 DOM 是一部错综复杂的戏剧，而 Comment 类型就像悄声低语的旁白，提供着幕后见解，却从不抢占舞台的焦点。Comment 节点允许我们在 HTML 文档中嵌入非活动性的备注，而不会干扰实际内容的呈现。

特点：

nodeType 为 8
通过 createComment() 方法创建
使用 data 属性存储注释内容
不在文档流中显示

DocumentFragment 类型：轻量级的文档片段

DocumentFragment 类型是一个轻量级的容器，可以暂时容纳 DOM 节点，而无需将其附加到主文档中。它就像一个临时的舞台，允许我们幕后排练，然后再华丽登场。

特点：

nodeType 为 11
通过 createDocumentFragment() 方法创建
不存在于 DOM 树中，除非附加到文档中
可以使用 appendChild() 和 insertBefore() 方法附加节点
可以克隆（cloneNode()）以创建 DocumentFragment 的副本

Comment 类型与 DocumentFragment 类型携手并进

Comment 类型和 DocumentFragment 类型看似截然不同，但在 DOM 的舞台上，它们却有着微妙的协同作用：

组织和注释代码： Comment 类型提供了在 HTML 文档中添加注释和说明的简洁方式，而不会破坏代码的结构。
优化性能： DocumentFragment 类型允许我们批量创建和操作 DOM 节点，避免了多次附加到文档树的性能开销。
构建复杂结构： 通过使用 DocumentFragment 作为构建块，我们可以轻松创建复杂的 DOM 结构，而无需将它们直接附加到文档中。

案例：使用 Comment 类型和 DocumentFragment 类型

为了更好地理解这些类型的实际应用，让我们通过一个示例来演示：

// 创建一个 DocumentFragment
const fragment = document.createDocumentFragment();

// 使用 Comment 类型注释代码段
fragment.appendChild(document.createComment('开始构建表格'));

// 构建一个 HTML 表格
const table = document.createElement('table');
const tbody = document.createElement('tbody');
for (let i = 0; i < 5; i++) {
  const tr = document.createElement('tr');
  for (let j = 0; j < 5; j++) {
    const td = document.createElement('td');
    td.textContent = `单元格 ${i},${j}`;
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}
table.appendChild(tbody);

// 将表格附加到 DocumentFragment
fragment.appendChild(table);

// 一次性将 DocumentFragment 附加到 DOM
document.body.appendChild(fragment);