DocumentFragment

DocumentFragment 인터페이스는 부모가 없는 단순한 형태의 문서 객체를 나타냅니다. Document의 경량화된 버전으로서 사용되며, 일반적인 문서와 마찬가지로 여러 노드로 이루어진 문서의 구조를 담을 수 있습니다. 핵심적인 차이점은 document fragment는 활성화된 문서 트리의 일부가 아니기 때문에, fragment에 가하는 변경사항은 문서에 영향을 주지 않고 reflow를 일으키지 않으며, 성능에 큰 영향을 미치지 않습니다.

DocumentFragment는 일반적으로 DOM 서브트리를 조립해서 DOM에 삽입하기 위한 용도로 사용되고, 이 때 appendChild()나 insertBefore() 같은 Node 인터페이스의 메소드가 사용됩니다. 이 작업은 fragment의 노드들을 DOM으로 이동시키고, DocumentFragment를 비웁니다. 모든 노드들이 한꺼번에 문서에 삽입되기 때문에, 한 번의 리플로우와 렌더링만 일어납니다. 노드를 개별적으로 삽입할 때 매 노드마다 한 번씩 일어나는 것과는 대조적입니다.

이 인터페이스는 또한 Web component와 함께 유용하게 사용할 수 있습니다: <template> 요소는 HTMLTemplateElement.content 속성에 DocumentFragment를 가지고 있습니다.

빈 DocumentFragment는 document.createDocumentFragment() 메소드 혹은 생성자를 통해 만들 수 있습니다.

Properties

This interface has no specific properties, but inherits those of its parent, Node, and implements those of the ParentNode interface.

ParentNode.children Read only
Returns a live HTMLCollection containing all objects of type Element that are children of the DocumentFragment object.
ParentNode.firstElementChild Read only
Returns the Element that is the first child of the DocumentFragment object, or null if there is none.
ParentNode.lastElementChild Read only
Returns the Element that is the last child of the DocumentFragment object, or null if there is none.
ParentNode.childElementCount Read only
Returns an unsigned long giving the amount of children that the DocumentFragment has.

Constructor

DocumentFragment()  
Returns an empty DocumentFragment object.

Methods

This interface inherits the methods of its parent, Node, and implements those of the ParentNode interface.

DocumentFragment.querySelector()
Returns the first Element node within the DocumentFragment, in document order, that matches the specified selectors.
DocumentFragment.querySelectorAll()
Returns a NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.
DocumentFragment.getElementById()
Returns the first Element node within the DocumentFragment, in document order, that matches the specified ID.

Specifications

Specification Status Comment
DOM
The definition of 'DocumentFragment' in that specification.		 Living Standard Added the constructor and the implementation of ParentNode.
Selectors API Level 1
The definition of 'DocumentFragment' in that specification.		 Obsolete Added the querySelector() and querySelectorAll() methods.
Document Object Model (DOM) Level 3 Core Specification
The definition of 'DocumentFragment' in that specification.		 Obsolete No change from Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core Specification
The definition of 'DocumentFragment' in that specification.		 Obsolete No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification
The definition of 'DocumentFragment' in that specification.		 Obsolete Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DocumentFragmentChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
DocumentFragment() constructor
Experimental
Chrome Full support 28Edge Full support YesFirefox Full support 24IE No support NoOpera Full support 15Safari Full support 8WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 24Opera Android Full support YesSafari iOS Full support 8Samsung Internet Android Full support Yes
ParentNode methods
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ParentNode properties
Experimental
Chrome Full support 28Edge No support NoFirefox Full support 25IE No support NoOpera Full support 15Safari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 25Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support Yes
querySelectorChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10Safari Full support 3.2WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support Yes
querySelectorAllChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10Safari Full support 3.2WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

관련 주제
  1. Document Object Model
  2. DocumentFragment
  3. Constructor
    1. DocumentFragment() [Translate]
  4. Properties
    1. childElementCount [Translate]
    2. children
    3. firstElementChild [Translate]
    4. lastElementChild [Translate]
  5. Methods
    1. append()
    2. prepend()
    3. querySelector() [Translate]
    4. querySelector() [Translate]
    5. querySelectorAll() [Translate]
    6. querySelectorAll() [Translate]
  6. Inheritance:
    1. Node
    2. EventTarget
  7. Related pages for 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