createDocumentFragment()で複数の要素をひと手間で追加する

大量の要素を生成して挿入したいとき、毎回DOMにアクセスして一つ一つ挿入していくのはパフォーマンスの観点から良くないとされています。

createDocumentFragmentを使うことで、大量の要素をまとめて一度に追加することができます。

記事内に広告を含みます

document.createDocumentFragment()
1. 特徴
2. 使用例

`document.createDocumentFragment()`

document.createDocumentFragment() は、新しい空の DocumentFragment オブジェクトを作成します。このDocumentFragment は、DOM ツリーの一部ではなくメモリ上に存在する軽量なドキュメントオブジェクトで、複数の要素を一度にDOMツリーに追加したり、置き換えたりするために使われます。

特徴

DocumentFragment は、DOMツリーの一部ではないため、その中に要素を追加してもページの再描画が引き起こされません。これにより、パフォーマンスを向上させることができます。
appendChild() や insertBefore() などの DOM 操作を DocumentFragment に対して行うことができ、それらの操作が完了した後で、一度に本来の DOM ツリーに挿入することが可能です。
DocumentFragment に追加されたノードは、その DocumentFragment をDOMに挿入する際に元のフラグメントから削除され、DOMツリーに移動します。

使用例

document.createDocumentFragment() を使用して、大量の<li>要素を <ul> 要素に効率的に追加する例を考えてみましょう。

JavaScript

// ul要素を作成
var ul = document.createElement('ul');
// 新しい DocumentFragment を作成
var fragment = document.createDocumentFragment();
// リスト項目を作成して DocumentFragment に追加
for (var i = 0; i < 100; i++) { var li = document.createElement('li'); li.appendChild(document.createTextNode('項目 ' + (i + 1))); fragment.appendChild(li);
}
// DocumentFragment を ul要素に追加
// これにより、フラグメント内のすべてのli要素がDOMに挿入される
ul.appendChild(fragment);
// ul要素をDOMに追加
document.body.appendChild(ul);

このコードは、DocumentFragment内に100個の<li>要素を作成し、すべてを一度に <ul> 要素に追加しています。こうすることで、<li>を追加するたびにDOMツリーが更新されるのを避けられ、パフォーマンスが向上します。