JavaScript DocumentFragment

概要: このチュートリアルでは、JavaScriptのDocumentFragmentインターフェースについて学びます。DOMノードを構成し、アクティブなDOMツリーに更新する方法を解説します。

JavaScript DocumentFragmentインターフェース入門

DocumentFragmentインターフェースは、標準的なドキュメントのようにドキュメント構造の一部を格納する、軽量版のDocumentです。しかし、DocumentFragmentはアクティブなDOMツリーの一部ではありません。

ドキュメントフラグメントを変更しても、ドキュメントには影響せず、パフォーマンスにも影響しません。

通常、DocumentFragmentはDOMノードを構成するために使用し、appendChild()またはinsertBefore()メソッドを使用してアクティブなDOMツリーに追加または挿入します。

新しいドキュメントフラグメントを作成するには、次のようにDocumentFragmentコンストラクターを使用します。

let fragment = new DocumentFragment();Code language: JavaScript (javascript)

あるいは、DocumentオブジェクトのcreateDocumentFragment()メソッドを使用することもできます。

let fragment = document.createDocumentFragment();Code language: JavaScript (javascript)

このDocumentFragmentは、親であるNodeのメソッドを継承し、querySelector()やquerySelectorAll()などのParentNodeインターフェースのメソッドも実装しています。

JavaScript DocumentFragmentの例

idがlanguageの<ul>要素があるとします。

<ul id="language"></ul>Code language: HTML, XML (xml)

次のコードは、<li>要素のリストを作成し、DocumentFragmentを使用して各要素を<ul>要素に追加します。

let languages = ['JS', 'TypeScript', 'Elm', 'Dart','Scala'];

let langEl = document.querySelector('#language')

let fragment = new DocumentFragment();
languages.forEach((language) => {
    let li = document.createElement('li');
    li.innerHTML = language;
    fragment.appendChild(li);
})

langEl.appendChild(fragment);Code language: JavaScript (javascript)

動作方法

まず、querySelector()メソッドを使用して、idで<ul>要素を選択します。
次に、新しいドキュメントフラグメントを作成します。
次に、languages配列の各要素に対して、リストアイテム要素を作成し、リストアイテムのinnerHTMLにlanguageを代入し、新しく作成されたリストアイテムをすべてドキュメントフラグメントに追加します。
最後に、ドキュメントフラグメントを<ul>要素に追加します。

まとめ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocumentFragment Demo</title>
</head>
<body>
    <ul id="language"></ul>

    <script>
        let languages = ['JS', 'TypeScript', 'Elm', 'Dart', 'Scala'];

        let langEl = document.querySelector('#language');
        let fragment = new DocumentFragment();

        languages.forEach((language) => {
            let li = document.createElement('li');
            li.innerHTML = language;
            fragment.appendChild(li);
        })

        langEl.appendChild(fragment);
    </script>

</body>
</html>Code language: HTML, XML (xml)

概要

パフォーマンスを向上させるために、アクティブなDOMツリーに更新する前に、DocumentFragmentを使用してDOMノードを構成します。

クイズ

このチュートリアルは役に立ちましたか？