DocumentFragment
DocumentFragment
インターフェイスは、親ノードを持たない最小限の文書オブジェクト(文書フラグメント)を表します。
これは Document
の軽量版として使用され、標準の文書のようにノードで構成される文書構造の一区間を格納します。重要な違いは、文書フラグメントがアクティブな文書ツリー構造の一部ではないことです。フラグメントに対して変更を行っても、文書には影響しません。
コンストラクター
DocumentFragment()
-
新しい
DocumentFragment
オブジェクトを作成して返します。
インスタンスプロパティ
このインターフェイスには固有のプロパティはありませんが、その親である Node
から継承したプロパティがあります。
DocumentFragment.childElementCount
読取専用-
この
DocumentFragment
が持つ子要素
の数を表します。 DocumentFragment.children
読取専用-
この
DocumentFragment
オブジェクトの子であるすべてのElement
型のオブジェクトを含む、生きたHTMLCollection
を返します。 DocumentFragment.firstElementChild
読取専用-
この
DocumentFragment
オブジェクトの最初の子であるElement
を返します。なければnull
を返します。 DocumentFragment.lastElementChild
読取専用-
この
DocumentFragment
オブジェクトの最後の子であるElement
を返します。なければnull
を返します。
インスタンスメソッド
このインターフェイスには、その親である Node
から継承したメソッドがあります。
DocumentFragment.append()
-
一連の
Node
オブジェクトまたは文字列を、この文書フラグメントの最後の子の後に追加します。 DocumentFragment.prepend()
-
一連の
Node
オブジェクトまたは文字列を、この文書フラグメントの最初の子の前に追加します。 DocumentFragment.querySelector()
-
この
DocumentFragment
の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初のElement
ノードを返します。 DocumentFragment.querySelectorAll()
-
この
DocumentFragment
の中で、指定されたセレクターに一致するすべてのElement
ノードのNodeList
を返します。 DocumentFragment.replaceChildren()
-
DocumentFragment
の既存の子を、指定された一連の新しい子で置き換えます。 DocumentFragment.getElementById()
-
この
DocumentFragment
の中で、文書の順序で見た場合に、指定された ID に一致する最初のElement
ノードを返します。機能的にはDocument.getElementById()
と同じです。
使用上の注意
DocumentFragment
の一般的な使用方法は、フラグメントを作成し、その中で DOM サブツリーを組み立て、Node
インターフェイスのメソッド、例えば appendChild()
、append()
、insertBefore()
などを用いて、フラグメントを DOM に追加または挿入することです。 これにより、フラグメントのノードが DOM 内へ移動し、空の DocumentFragment
が残ります。
このインターフェイスは、ウェブコンポーネントでも活躍します。<template>
要素は DocumentFragment
を HTMLTemplateElement.content
プロパティに保持しています。
空の DocumentFragment
は document.createDocumentFragment()
メソッドまたはコンストラクターで作成することができます。
性能
DocumentFragment
の性能が高いということは、よく誇張されています。エンジンによっては DocumentFragment
を使用すると、実際には、ループで文書に追加していくするよりも遅くなる場合があることがこのベンチマークで示されています。しかし、この例の違いは非常に小さいので、性能よりも読みやすさを重視して最適化した方がいいでしょう。
例
HTML
<ul></ul>
JavaScript
const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];
const fragment = new DocumentFragment();
for (const fruit of fruits) {
const li = document.createElement("li");
li.textContent = fruit;
fragment.append(li);
}
ul.append(fragment);
結果
仕様書
Specification |
---|
DOM Standard # interface-documentfragment |
ブラウザーの互換性
BCD tables only load in the browser