DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは Document の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、再フローを起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。
DocumentFragment の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 Node インターフェイスの appendChild() または insertBefore() などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の DocumentFragment が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。
このインターフェイスはウェブコンポーネントでも大いに役に立っています。 <template> 要素はその HTMLTemplateElement.content プロパティに DocumentFragment を含みます。
空の DocumentFragment は document.createDocumentFragment メソッドやコンストラクターを使って作成できます。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/DocumentFragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DocumentFragment</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
プロパティ
このインターフェイスには固有のプロパティはありませんが、その親である 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 の定義 |
廃止された | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DocumentFragment | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 9 | Opera 完全対応 8 | Safari 完全対応 3 | WebView Android 完全対応 1 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
DocumentFragment() constructor | Chrome 完全対応 28 | Edge 完全対応 ≤18 | Firefox 完全対応 24 | IE 未対応 なし | Opera 完全対応 15 | Safari 完全対応 8 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 24 | Opera Android 完全対応 あり | Safari iOS 完全対応 8 | Samsung Internet Android 完全対応 あり |
ParentNode methods | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
ParentNode properties | Chrome 完全対応 28 | Edge 完全対応 79 | Firefox 完全対応 25 | IE 未対応 なし | Opera 完全対応 15 | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 25 | Opera Android 完全対応 14 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
querySelector | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 10 | Safari 完全対応 3.2 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 3.2 | Samsung Internet Android 完全対応 あり |
querySelectorAll | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 10 | Safari 完全対応 3.2 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 3.2 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。