HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcreateDocumentFragment()メソッドとは？基本と使い方を解説

HTML DOMのcreateDocumentFragment()メソッドは、ドキュメントフラグメント（DocumentFragment）を作成するためのメソッドです。ドキュメントフラグメントはメモリ上に存在する軽量な「仮想」ノードであり、作成しただけではページのDOM構造に一切影響を与えません。

このドキュメントフラグメントを実際のDOMに追加（appendChild）すると、フラグメント自体が挿入されるのではなく、その中に含まれる子ノードだけが挿入されます。つまり、複数の要素をまとめて効率よく操作・追加したい場合に非常に便利な仕組みです。

createDocumentFragment()の構文

createDocumentFragment()メソッドの構文は以下の通りです。

document.createDocumentFragment()

引数は不要で、呼び出すとDocumentFragmentオブジェクト（ドキュメントフラグメントノード）が返されます。

サンプルコード

以下に、createDocumentFragment()メソッドを使った具体的な例を示します。

<!DOCTYPE html>
<html>
<body>
<h1>createDocumentFragment() の使用例</h1>
<p>下のボタンをクリックすると、createDocumentFragmentメソッドを使ってリスト項目が変更されます。</p>
<button type="button" onclick="changeList()">CHANGE</button>
<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava</li>
<li>Strawberry</li>
<li>Papaya</li>
</ul>
<script>
    function changeList() {
        var x = document.createDocumentFragment();
        x.appendChild(document.getElementsByTagName("LI")[0]);
        x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
        document.getElementsByTagName("UL")[0].appendChild(x);
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのcreateDocumentFragment()メソッドとは？基本と使い方を解説

CHANGEボタンをクリックすると −

HTML DOMのcreateDocumentFragment()メソッドとは？基本と使い方を解説

コードの解説

上記の例では、以下のような処理を行っています。

まず、5つのリスト項目を持つ順序なしリスト（ul要素）を作成しています。

<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava</li>
<li>Strawberry</li>
<li>Papaya</li>
</ul>

次に、クリックされるとchangeList()関数を実行するCHANGEボタンを配置しています。

<button type="button" onclick="changeList()">CHANGE</button>

changeList()関数内では、documentオブジェクトのcreateDocumentFragment()メソッドを使ってドキュメントフラグメントを作成し、変数xに代入します。続いてappendChild()メソッドにより、先頭のli要素をドキュメントフラグメントの子ノードとして移動させます。

その後、フラグメント内にある最初のリスト項目のテキスト値を「Watermelon」に書き換えます。最後に、ドキュメントフラグメントをul要素の最後の子として追加します。これにより、元のリストの先頭項目が「Watermelon」としてリストの末尾に移動する形になります。

function changeList() {
    var x = document.createDocumentFragment();
    x.appendChild(document.getElementsByTagName("LI")[0]);
    x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
    document.getElementsByTagName("UL")[0].appendChild(x);
}

ドキュメントフラグメントを使うメリット

ドキュメントフラグメントを利用する主なメリットは、パフォーマンスの向上です。通常、要素を1つずつDOMに追加すると、そのたびにブラウザが再描画（リフロー）を行う必要があります。しかし、ドキュメントフラグメント上であらかじめ要素を組み立ててから一度に追加すれば、再描画の回数を最小限に抑えられます。

また、すべての操作がメモリ上で完結するため、組み立て途中の不完全な状態がユーザーに見えることもありません。多数の要素を動的に生成する場合や、既存のリスト・テーブルを一括で更新する場合などに、特に効果を発揮します。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド