DocumentFragment

コンストラクター

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()

指定されたNodeを、呼び出し元の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() メソッドまたはコンストラクターで作成することができます。

性能

DocumentFragment の性能が高いということは、よく誇張されています。エンジンによっては DocumentFragment を使用すると、実際には、ループで文書に追加していくするよりも遅くなる場合があることがこのベンチマークで示されています。しかし、この例の違いは非常に小さいので、性能よりも読みやすさを重視して最適化した方がいいでしょう。

例

HTML

<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);

結果

仕様書

ブラウザーの互換性