The DocumentFragment
interface represents a minimal document object that has no parent. It is used as a lightweight version of Document
that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when changes are made.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/DocumentFragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DocumentFragment</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Constructor
DocumentFragment()
- Creates and returns a new
DocumentFragment
object.
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 typeElement
that are children of theDocumentFragment
object. ParentNode.firstElementChild
Read only- Returns the
Element
that is the first child of theDocumentFragment
object, ornull
if there is none. ParentNode.lastElementChild
Read only- Returns the
Element
that is the last child of theDocumentFragment
object, ornull
if there is none. ParentNode.childElementCount
Read only- Returns an
unsigned long
giving the amount of children that theDocumentFragment
has.
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 theDocumentFragment
, in document order, that matches the specified selectors. DocumentFragment.querySelectorAll()
- Returns a
NodeList
of all theElement
nodes within theDocumentFragment
that match the specified selectors. DocumentFragment.getElementById()
- Returns the first
Element
node within theDocumentFragment
, in document order, that matches the specified ID. Functionally equivalent toDocument.getElementById()
.
Usage notes
A common use for DocumentFragment
is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node
interface methods such as appendChild()
or insertBefore()
. Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment
. Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.
This interface is also of great use with Web components: <template>
elements contain a DocumentFragment
in their HTMLTemplateElement.content
property.
An empty DocumentFragment
can be created using the document.createDocumentFragment()
method or the constructor.
Example
HTML
<ul id="list"></ul>
JavaScript
var list = document.querySelector('#list') var fruits = ['Apple', 'Orange', 'Banana', 'Melon'] var fragment = new DocumentFragment() fruits.forEach(function (fruit) { var li = document.createElement('li') li.innerHTML = fruit fragment.appendChild(li) }) list.appendChild(fragment)
Result
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DocumentFragment | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
DocumentFragment() constructor | Chrome Full support 28 | Edge Full support ≤18 | Firefox Full support 24 | IE No support No | Opera Full support 15 | Safari Full support 8 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 24 | Opera Android Full support Yes | Safari iOS Full support 8 | Samsung Internet Android Full support Yes |
ParentNode methods | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
ParentNode properties | Chrome Full support 28 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 15 | Safari No support No | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 25 | Opera Android Full support 14 | Safari iOS No support No | Samsung Internet Android Full support Yes |
querySelector | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 10 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
querySelectorAll | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 10 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.2 | Samsung 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.