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

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

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

空の DocumentFragmentdocument.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 ノードを返します。

仕様書

仕様書 状態 備考
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 の定義
廃止された 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
DocumentFragment() constructor
実験的
Chrome 完全対応 28Edge 未対応 なしFirefox 完全対応 24IE 未対応 なしOpera 完全対応 15Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 24Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
querySelectorChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
querySelectorAllChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
ParentNode properties
実験的
Chrome 完全対応 28Edge 未対応 なしFirefox 完全対応 25IE 未対応 なしOpera 完全対応 15Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 25Opera Android 完全対応 5Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
ParentNode methods
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, mfuji09, twe, AshfaqHossain
最終更新者: silverskyvicto,