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.
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 childelements
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
BCD tables only load in the browser