DocumentFragment - 親を持たないドキュメント
DocumentFragmentは親を持たないドキュメントです。このフラグメント内にある複数のノードを、ドキュメントに一度に追加することができます。フラグメント内のノードに変更を加えてもドキュメントには反映されず、パフォーマンス上でもメリットがあります。
概要
- 名前
- DocumentFragment
- 継承
- Node
- DocumentFragment
- 実装
- NonElementParentNode
- ParentNode
- IDL
[Constructor, Exposed=Window] interface DocumentFragment : Node { };
- 仕様書
- https://dom.spec.whatwg.org/#documentfragment
チュートリアル
DocumentFragmentは、コンストラクタやDocument.createDocumentFragment()で作成できます。
var documentFragment = new DocumentFragment() ;
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>
コンストラクタ
DocumentFragment()
新しいDocumentFragmentのオブジェクトを作成します。
プロパティ
固有のプロパティはありません。
メソッド
固有のメソッドはありません。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
DocumentFragment | ● | ● | ● | ● | ● | ● | ● | ● |
DocumentFragment() | ● 29+ | ● 24+ | ● 7.1+ | × | × | ● 16+ | ● 8.3+ | ● 4.4+ |
関連記事
- DocumentFragment()
- DocumentFragment()は、DocumentFragmentのコンストラクタです。新しいオブジェクトを作成します。
- Range.insertNode()
- insertNode()は、Rangeのメソッドです。範囲の始点にノードを挿入します。
- Range
- Rangeは、範囲を管理するための機能を備えたインターフェイスです。
- Document.createDocumentFragment()
- createDocumentFragment()は、Documentのメソッドです。DocumentFragmentを新しく作成します。