DocumentFragment

DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは Document の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、再フローを起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。

DocumentFragment の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 Node インターフェイスの appendChild() または insertBefore() などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の DocumentFragment が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。

このインターフェイスはウェブコンポーネントでも大いに役に立っています。 <template> 要素はその HTMLTemplateElement.content (en-US) プロパティに DocumentFragment を含みます。

空の DocumentFragmentdocument.createDocumentFragment メソッドやコンストラクターを使って作成できます。

プロパティ

このインターフェイスには固有のプロパティはありませんが、その親である Node のプロパティを継承し、 ParentNode インターフェイスのプロパティを実装しています。

ParentNode.children 読取専用
DocumentFragment オブジェクトの子である型 Element のすべてのオブジェクトを含む、「生」の HTMLCollection を返します。
ParentNode.firstElementChild (en-US) 読取専用
DocumentFragment オブジェクトの最初の子である Element、または無ければ null を返します。
ParentNode.lastElementChild (en-US) 読取専用
DocumentFragment オブジェクトの最後の子である Element、または無ければ null を返します。
ParentNode.childElementCount 読取専用
DocumentFragment が持つ子の数を表す unsigned long を返します。

コンストラクター

DocumentFragment() (en-US)
空の DocumentFragment オブジェクトを返します。

メソッド

このインターフェイスはその親である Node のメソッドを継承し、 ParentNode インターフェイスのメソッドを実装しています。

DocumentFragment.querySelector() (en-US)
DocumentFragment の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の Element ノードを返します。
DocumentFragment.querySelectorAll() (en-US)
DocumentFragment の中で、指定されたセレクターに一致するすべての Element ノードの NodeList を返します。
DocumentFragment.getElementById()
DocumentFragment の中で、文書の順序で見た場合に、指定された ID に一致する最初の Element ノードを返します。

仕様書

仕様書 状態 備考
DOM
DocumentFragment の定義
現行の標準 コンストラクターと ParentNode の実装を追加。
Selectors API Level 1
DocumentFragment の定義
廃止 querySelector()querySelectorAll() メソッドを追加。
Document Object Model (DOM) Level 3 Core Specification
DocumentFragment の定義
廃止 Document Object Model (DOM) Level 2 Core Specification より変更なし
Document Object Model (DOM) Level 2 Core Specification
DocumentFragment の定義
廃止 Document Object Model (DOM) Level 1 Specification より変更なし
Document Object Model (DOM) Level 1 Specification
DocumentFragment の定義
廃止 初回定義

ブラウザーの対応

BCD tables only load in the browser

関連情報