複数のノードをまとめて追加(DocumentFragment)

DocumentFragment オブジェクトを作成すると、一時的に利用する DOM ツリーを作成することができます。たくさんのノードをドキュメントに追加する必要がある場合、一つ一つのノードを順番に追加していくと、その都度画面の位置調整などの計算が発生する可能性があります。 DocumentFragment オブジェクトを作成し、一時的な DOM ツリーに複数のノードを追加したあとでドキュメントには DocumentFragment オブジェクトを追加することで画面の位置調整などの計算を最小限にすることができます。ここでは DocumentFragment オブジェクトの使い方について解説します。

(Last modified: )

DocumentFragmentオブジェクトを作成する

最初に空の DocumentFragment オブジェクトを作成します。 Document オブジェクトの createDocumentFragment メソッドを使います。書式は次のとおりです。 

document.createDocumentFragment()

実際には次のように作成します。 

let fragment = document.createDocumentFragment();

または DocumentFragment オブジェクトのコンストラクタを使用し次のように作成することもできます。 

let fragment = new DocumentFragment();

どちらの方法でも構いません。

DocumentFragmentオブジェクトにノードを追加する

DocumentFragment オブジェクトは Node オブジェクトや ParentNode オブジェクトのメソッドが利用できますので、 append メソッドや prepend メソッドなどを使ってノードを追加することができます。

例えば DocumentFragment オブジェクトを作成したあとで div タグの要素ノードと p タグの要素ノードを作成しそれぞれの要素ノードを DocumentFragment オブジェクトに追加するには次のように行います。 

let fragment = document.createDocumentFragment();

let child1 = document.createElement('div');
let child2 = document.createElement('p');
child2.append(document.createTextNode('Hello'));

fragment.append(child1);
fragment.append(child2);

console.log(fragment);
>> #document-fragment
>>   <div>?</div>
?>>   <p>?Hello?</p>

※ ノードを追加する append メソッドなどの使い方については「ノードを子ノードの中の先頭または最後に追加(prepend,append,appendChild)」を参照されてください。

他のノードにDocumentFragmentオブジェクトを追加する

DocumentFragment オブジェクトもノードのひとつですので、既にドキュメントに追加されているノードの子ノードや同じ階層のノードとして追加することができます。例えば id 属性の値が xxx のノードの子ノードとして DocumentFragment オブジェクトを追加するには次のように記述します。 

let fragment = document.createDocumentFragment();

let child1 = document.createElement('div');
let child2 = document.createElement('p');
child2.append(document.createTextNode('Hello'));

fragment.append(child1);
fragment.append(child2);

let parentnode = document.getElementById('xxx');
parentnode.append(fragment);

ただ他のノードと違い、 DocumentFragment オブジェクトそのものが追加されるわけではなく DocumentFragment オブジェクトに追加されているノードだけが追加される点に注意してください。

例えば li タグの要素ノードを 2 つ追加した DocumentFragment オブジェクトを、 ul タグの要素ノードの子ノードとして追加する場合で考えてみます。

他のノードにDocumentFragmentオブジェクトを追加する(1)

この時、 DocumentFragment オブジェクトそのものが子ノードとして追加されるのではなく、 DocumentFragment オブジェクトに追加されていたノードだけが子ノードとして追加されます。

他のノードにDocumentFragmentオブジェクトを追加する(2)

このように DocumentFragment オブジェクトを利用することで、一時的な DOM ツリーを作成し必要なノードを追加したあとで、一時的な DOM ツリーに追加されていたノードだけをまとめて別のノードの子ノードなどに追加することができます。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ノードを追加</title>
</head>
<body>

<p>最近行った店</p>

<ul id="shopinfo">
  <li id="m01">リストランテ南青山</li>
  <li id="m02">和食屋青山</li>
</ul>

<button onClick="getElement();">ノードを追加</button>

<script>
function getElement(){
    let fragment = document.createDocumentFragment();
    let child1 = document.createElement('li');
    child1.append(document.createTextNode('カレーショップ南青山'));
    let child2 = document.createElement('li');
    child2.append(document.createTextNode('Cafe Aoyama'));

    fragment.append(child1);
    fragment.append(child2);

    let parentnode = document.getElementById('shopinfo');
    parentnode.append(fragment);
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 DocumentFragment オブジェクトを作成したあと li タグの要素を 2 つ作成し DocumentFragment オブジェクトに追加します。そのあとで追加先ノードとして id 属性が shopinfo の要素ノードを取得し、先に作成した DocumentFragment オブジェクトを追加先ノードの子ノードの最後に追加しています。

他のノードにDocumentFragmentオブジェクトを追加する(3)

-- --

DocumentFragment オブジェクトの使い方について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。