DocumentFragment

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

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

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

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

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

ParentNode.children 読取専用

DocumentFragment オブジェクトの子である型 Element のすべてのオブジェクトを含む、「生」の HTMLCollection を返します。

ParentNode.firstElementChild 読取専用

DocumentFragment オブジェクトの最初の子である Element、または無ければ null を返します。

ParentNode.lastElementChild 読取専用

DocumentFragment オブジェクトの最後の子である Element、または無ければ null を返します。

ParentNode.childElementCount 読取専用

DocumentFragment が持つ子の数を表す unsigned long を返します。

DocumentFragment()

空の DocumentFragment オブジェクトを返します。

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

DocumentFragment.querySelector()

DocumentFragment の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の Element ノードを返します。

DocumentFragment.querySelectorAll()

DocumentFragment の中で、指定されたセレクターに一致するすべての Element ノードの NodeList を返します。

DocumentFragment.getElementById()

DocumentFragment の中で、文書の順序で見た場合に、指定された ID に一致する最初の Element ノードを返します。

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

• DOM インターフェイスの目次