DocumentFragment

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

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.moveBefore(): 指定されたmust be providedを、呼び出し元のDocumentFragment内に直接の子として、指定された参照ノードの前に移動します。ノードは除去されることなく、そのまま挿入されます。
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 = ["りんご", "みかん", "バナナ", "メロン"];const fragment = new DocumentFragment();for (const fruit of fruits) {  const li = document.createElement("li");  li.textContent = fruit;  fragment.append(li);}ul.append(fragment);