DocumentFragment
DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは Document の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、再フローを起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。
DocumentFragment の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 Node インターフェイスの appendChild() または insertBefore() などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の DocumentFragment が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。
このインターフェイスはウェブコンポーネントでも大いに役に立っています。 <template> 要素はその HTMLTemplateElement.content プロパティに DocumentFragment を含みます。
空の DocumentFragment は document.createDocumentFragment メソッドやコンストラクターを使って作成できます。
プロパティ
このインターフェイスには固有のプロパティはありませんが、その親である Node のプロパティを継承し、 ParentNode インターフェイスのプロパティを実装しています。
ParentNode.children(en-US) 読取専用 Experimental-
DocumentFragmentオブジェクトの子である型Elementのすべてのオブジェクトを含む、「生」のHTMLCollectionを返します。 ParentNode.firstElementChild(en-US) 読取専用 Experimental-
DocumentFragmentオブジェクトの最初の子であるElement、または無ければnullを返します。 ParentNode.lastElementChild(en-US) 読取専用 Experimental-
DocumentFragmentオブジェクトの最後の子であるElement、または無ければnullを返します。 ParentNode.childElementCount(en-US) 読取専用 Experimental-
DocumentFragmentが持つ子の数を表すunsigned longを返します。
コンストラクター
DocumentFragment()(en-US) Experimental-
空の
DocumentFragmentオブジェクトを返します。
メソッド
このインターフェイスはその親である Node のメソッドを継承し、 ParentNode インターフェイスのメソッドを実装しています。
DocumentFragment.querySelector()-
DocumentFragmentの中で、文書の順序で見た場合に、指定されたセレクターに一致する最初のElementノードを返します。 DocumentFragment.querySelectorAll()-
DocumentFragmentの中で、指定されたセレクターに一致するすべてのElementノードのNodeListを返します。 DocumentFragment.getElementById()(en-US)-
DocumentFragmentの中で、文書の順序で見た場合に、指定された ID に一致する最初のElementノードを返します。
仕様書
| Specification |
|---|
| DOM Standard # interface-documentfragment |
ブラウザーの対応
BCD tables only load in the browser