DocumentFragment

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

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

EventTarget Node 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.replaceChildren()

DocumentFragment の既存の子を、指定された一連の新しい子で置き換えます。

DocumentFragment.getElementById()

この DocumentFragment の中で、文書の順序で見た場合に、指定された ID に一致する最初の Element ノードを返します。機能的には Document.getElementById() と同じです。

使用上の注意

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

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

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

性能

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

HTML

html
<ul></ul>

JavaScript

js
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