Document.createDocumentFragment()
新しい空の DocumentFragment
を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。
構文
var fragment = document.createDocumentFragment();
値
新しく作成された空の DocumentFragment
オブジェクトで、中にノードが挿入できるものです。
使用上の注意
DocumentFragment
は DOM の Node
オブジェクトですが、メインの DOM ツリーの一部にはなりません。通常の使い方は、文書フラグメントを生成し、その文書フラグメントに要素を追加して、その文書フラグメントを DOM ツリーへ追加することです。 DOM ツリー内では、文書フラグメントはすべての子要素によって置き換えられます。
文書フラグメントはメモリ内にあり、メインの DOM ツリーの一部ではないため、文書フラグメントに子要素を追加してもページのリフロー (要素の位置と大きさを決定するための計算) が行われません。そのため文書フラグメントを利用することによって、性能の改善が見込まれます。
DocumentFragment
コンストラクターを使用して新しいフラグメントを生成することもできます。
let fragment = new DocumentFragment();
例
この例では、主要なウェブブラウザのリストを DocumentFragment
内に作成し、表示するドキュメントに新しい DOM サブツリーを追加しています。
HTML
<ul id="ul">
</ul>
JavaScript
var element = document.getElementById('ul'); // ul が存在することを仮定
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer'];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
DOM Document.createDocumentFragment() の定義 |
現行の標準 | DOM 1 仕様書にて初回定義 |
ブラウザーの互換性
BCD tables only load in the browser