新しい空のDocumentFragmentを作成します。

文法

var docFragment = document.createDocumentFragment();

docFragmentは、 空のDocumentFragmentオブジェクトへの参照になります。

説明

DocumentFragmentはDOMノードです。 これらが主ツリーの一部になることはありません。 通常、ドキュメントの断片(document fragment)は、 作成したドキュメントの断片へ要素を追加し、それをDOMツリーへ追加するのに使用されます。 DOMツリー内では、その全ての子はドキュメントの断片に置換されます。

ドキュメントの断片はメモリ内に置かれ、主ツリーの一部で無いため、 それに子を追加することはページのリフロー(reflow : 要素の位置と構造の計算)を発生させません。 その結果としてドキュメントの断片の使用が、 パフォーマンスの向上に繋がりやすくなります。

documentFragmentはIE6を含む全てのブラウザでサポートされているため、 これを使わない理由がありません。

例

var ul = document.getElementsByTagName("ul")[0]; //存在するものとします。
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);
// よく知られたブラウザの一覧

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル

機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	?	?	?	?	?

仕様

• DOM Level 2: createDocumentFragment
• DOM Level 3: createDocumentFragment

関連項目

• document.implementation.createDocument()
• documentFragment

 Back to top