DocumentFragment

DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは Document の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、再フローを起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。

DocumentFragment の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 Node インターフェイスの appendChild() または insertBefore() などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の DocumentFragment が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。

このインターフェイスはウェブコンポーネントでも大いに役に立っています。 <template> 要素はその HTMLTemplateElement.content プロパティに DocumentFragment を含みます。

空の DocumentFragment は document.createDocumentFragment メソッドやコンストラクターを使って作成できます。

プロパティ

このインターフェイスには固有のプロパティはありませんが、その親である Node のプロパティを継承し、 ParentNode インターフェイスのプロパティを実装しています。

ParentNode.children 読取専用
DocumentFragment オブジェクトの子である型 Element のすべてのオブジェクトを含む、「生」の HTMLCollection を返します。
ParentNode.firstElementChild 読取専用
DocumentFragment オブジェクトの最初の子である Element、または無ければ null を返します。
ParentNode.lastElementChild 読取専用
DocumentFragment オブジェクトの最後の子である Element、または無ければ null を返します。
ParentNode.childElementCount 読取専用
DocumentFragment が持つ子の数を表す unsigned long を返します。

コンストラクター

DocumentFragment()
空の DocumentFragment オブジェクトを返します。

メソッド

このインターフェイスはその親である Node のメソッドを継承し、 ParentNode インターフェイスのメソッドを実装しています。

DocumentFragment.querySelector()
DocumentFragment の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の Element ノードを返します。
DocumentFragment.querySelectorAll()
DocumentFragment の中で、指定されたセレクターに一致するすべての Element ノードの NodeList を返します。
DocumentFragment.getElementById()
DocumentFragment の中で、文書の順序で見た場合に、指定された ID に一致する最初の Element ノードを返します。

仕様書

仕様書 状態 備考
DOM
DocumentFragment の定義		 現行の標準 コンストラクターと ParentNode の実装を追加。
Selectors API Level 1
DocumentFragment の定義		 廃止された querySelector() と querySelectorAll() メソッドを追加。
Document Object Model (DOM) Level 3 Core Specification
DocumentFragment の定義		 廃止された Document Object Model (DOM) Level 2 Core Specification より変更なし
Document Object Model (DOM) Level 2 Core Specification
DocumentFragment の定義		 廃止された Document Object Model (DOM) Level 1 Specification より変更なし
Document Object Model (DOM) Level 1 Specification
DocumentFragment の定義		 廃止された 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DocumentFragmentChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
DocumentFragment() constructor
実験的
Chrome 完全対応 28Edge 完全対応 ありFirefox 完全対応 24IE 未対応 なしOpera 完全対応 15Safari 完全対応 8WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 24Opera Android 完全対応 ありSafari iOS 完全対応 8Samsung Internet Android 完全対応 あり
ParentNode methods
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
ParentNode properties
実験的
Chrome 完全対応 28Edge 未対応 なしFirefox 完全対応 25IE 未対応 なしOpera 完全対応 15Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 25Opera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
querySelectorChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
querySelectorAllChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

関連トピック
  1. Document Object Model
  2. DocumentFragment
  3. コンストラクター
    1. DocumentFragment() [翻訳する]
  4. プロパティ
    1. childElementCount
    2. children
    3. firstElementChild [翻訳する]
    4. lastElementChild [翻訳する]
  5. メソッド
    1. append()
    2. prepend()
    3. querySelector() [翻訳する]
    4. querySelector() [翻訳する]
    5. querySelectorAll() [翻訳する]
    6. querySelectorAll() [翻訳する]
  6. 継承
    1. Node
    2. EventTarget
  7. DOM に関連するページ
    1. AbortController
    2. AbortSignal
    3. AbstractRange
    4. Attr
    5. ByteString
    6. CDATASection
    7. CSSPrimitiveValue
    8. CSSValue
    9. CSSValueList
    10. CharacterData
    11. ChildNode
    12. Comment
    13. CustomEvent
    14. DOMConfiguration
    15. DOMError
    16. DOMErrorHandler
    17. DOMException
    18. DOMImplementation
    19. DOMImplementationList
    20. DOMImplementationRegistry
    21. DOMImplementationSource
    22. DOMLocator
    23. DOMObject
    24. DOMParser
    25. DOMPoint
    26. DOMPointInit
    27. DOMPointReadOnly
    28. DOMRect
    29. DOMString
    30. DOMTimeStamp
    31. DOMTokenList
    32. DOMUserData
    33. Document
    34. DocumentType
    35. Element
    36. ElementTraversal
    37. Entity
    38. EntityReference
    39. Event
    40. EventTarget
    41. HTMLCollection
    42. MutationObserver
    43. Node
    44. NodeFilter
    45. NodeIterator
    46. NodeList
    47. NonDocumentTypeChildNode
    48. ProcessingInstruction
    49. PromiseResolver
    50. Range
    51. StaticRange
    52. Text
    53. TextDecoder
    54. TextEncoder
    55. TimeRanges
    56. TreeWalker
    57. TypeInfo
    58. USVString
    59. UserDataHandler
    60. XMLDocument