DocumentFragment
DocumentFragment
インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは Document
の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、再フローを起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。
DocumentFragment
の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 Node
インターフェイスの appendChild()
または insertBefore()
などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の DocumentFragment
が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。
このインターフェイスはウェブコンポーネントでも大いに役に立っています。 <template>
要素はその HTMLTemplateElement.content
(en-US) プロパティに DocumentFragment
を含みます。
空の DocumentFragment
は document.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
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。