SYNCERのロゴ
アイキャッチ画像

DocumentFragment - 親を持たないドキュメント

DocumentFragmentは親を持たないドキュメントです。このフラグメント内にある複数のノードを、ドキュメントに一度に追加することができます。フラグメント内のノードに変更を加えてもドキュメントには反映されず、パフォーマンス上でもメリットがあります。

概要

名前
DocumentFragment
継承
  • Node
  • DocumentFragment
IDL
[Constructor,
 Exposed=Window]
interface DocumentFragment : Node {
};
仕様書
https://dom.spec.whatwg.org/#documentfragment

チュートリアル

DocumentFragmentはDocument.createDocumentFragment()で作成できます。

var documentFragment = document.createDocumentFragment() ;

例えば、下記のul要素に複数のli要素を追加するケースを考えてみます。

<ul id="hoge"></ul>
var element = document.getElementById( "hoge" ) ;

appendChild()を利用するとしたら、次のように複数回、実行しなければいけません。これが50、100と個数がある場合、実行の度にドキュメントのレンダリングなどが発生し、パフォーマンス上も良いとは言えません。

element.appendChild( li1 ) ;
element.appendChild( li2 ) ;
element.appendChild( li3 ) ;
element.appendChild( li4) ;
element.appendChild( li5 ) ;

DocumentFragment内には、ドキュメントと同じようにノードを構成できます。そしてDocumentFragmentをドキュメントに追加すると、その中身だけをまとめて追加することができます。レンダリングなどが一度で済むため、パフォーマンス上のメリットがあります。

var documentFragment = document.createDocumentFragment() ;
documentFragment.appendChild( li1 ) ;
documentFragment.appendChild( li2 ) ;
documentFragment.appendChild( li3 ) ;
documentFragment.appendChild( li4) ;
documentFragment.appendChild( li5 ) ;

element.appendChild( documentFragment ) ;

デモ

DocumentFragmentのデモです。複数の要素をまとめて挿入しています。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<body>
<ul id="hoge"></ul>
<script>
var element = document.getElementById( "hoge" ) ;
var documentFragment = document.createDocumentFragment() ;

documentFragment.appendChild( createLIElement() ) ;
documentFragment.appendChild( createLIElement() ) ;
documentFragment.appendChild( createLIElement() ) ;
documentFragment.appendChild( createLIElement() ) ;
documentFragment.appendChild( createLIElement() ) ;

console.log( documentFragment ) ;
element.appendChild( documentFragment ) ;

function createLIElement () {
	var li = document.createElement( "li" ) ;
	li.textContent = "SYNCER" ;
	return li ;
}
</script>
</body>
</html>

プロパティ

固有のプロパティはありません。

メソッド

固有のメソッドはありません。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。