DocumentFragment

DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト（文書フラグメント）を表します。

これは Document の軽量版として使用され、標準の文書のようにノードで構成される文書構造の一区間を格納します。重要な違いは、文書フラグメントがアクティブな文書ツリー構造の一部ではないことです。フラグメントに対して変更を行っても、文書には影響しません。

コンストラクター

DocumentFragment(): 新しい DocumentFragment オブジェクトを作成して返します。

インスタンスプロパティ

このインターフェイスには固有のプロパティはありませんが、その親である Node から継承したプロパティがあります。

DocumentFragment.childElementCount 読取専用: この DocumentFragment が持つ子要素の数を表します。
DocumentFragment.children 読取専用: この DocumentFragment オブジェクトの子であるすべての Element 型のオブジェクトを含む、生きた HTMLCollection を返します。
DocumentFragment.firstElementChild 読取専用: この DocumentFragment オブジェクトの最初の子である Element を返します。なければ null を返します。
DocumentFragment.lastElementChild 読取専用: この DocumentFragment オブジェクトの最後の子である Element を返します。なければ null を返します。

インスタンスメソッド

このインターフェイスには、その親である Node から継承したメソッドがあります。

DocumentFragment.append(): 一連の Node オブジェクトまたは文字列を、この文書フラグメントの最後の子の後に追加します。
DocumentFragment.prepend(): 一連の Node オブジェクトまたは文字列を、この文書フラグメントの最初の子の前に追加します。
DocumentFragment.querySelector(): この DocumentFragment の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の Element ノードを返します。
DocumentFragment.querySelectorAll(): この DocumentFragment の中で、指定されたセレクターに一致するすべての Element ノードの NodeList を返します。
DocumentFragment.replaceChildren(): DocumentFragment の既存の子を、指定された一連の新しい子で置き換えます。
DocumentFragment.getElementById(): この DocumentFragment の中で、文書の順序で見た場合に、指定された ID に一致する最初の Element ノードを返します。機能的には Document.getElementById() と同じです。

DocumentFragment の一般的な使用方法は、フラグメントを作成し、その中で DOM サブツリーを組み立て、Node インターフェイスのメソッド、例えば appendChild()、append()、insertBefore() などを用いて、フラグメントを DOM に追加または挿入することです。これにより、フラグメントのノードが DOM 内へ移動し、空の DocumentFragment が残ります。

このインターフェイスは、ウェブコンポーネントでも活躍します。<template> 要素は DocumentFragment を HTMLTemplateElement.content プロパティに保持しています。

空の DocumentFragment は document.createDocumentFragment() メソッドまたはコンストラクターで作成することができます。

<ul></ul>

JavaScript

const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);

結果

仕様書

Specification
DOM Standard # interface-documentfragment

ブラウザーの互換性

BCD tables only load in the browser