The DocumentFragment interface represents a minimal document object that has no parent. It is used as a light-weight version of Document to store a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn't part of the actual DOM's structure, changes made to the fragment don't affect the document, cause reflow, or incur any performance impact that can occur when changes are made.

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.

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.find()
Returns the first matching Element in the tree of the DocumentFragment.
DocumentFragment.findAll()
Returns a NodeList of matching Element in the tree of the DocumentFragment.
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 2
The definition of 'DocumentFragment' in that specification.
Working Draft Added the find() and findAll() methods.
Selectors API Level 1
The definition of 'DocumentFragment' in that specification.
Recommendation Added the querySelector() and querySelectorAll() methods.
Document Object Model (DOM) Level 3 Core Specification
The definition of 'DocumentFragment' in that specification.
Recommendation 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.
Recommendation No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification
The definition of 'DocumentFragment' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
querySelector() and querySelectorAll() 1.0 (Yes) 3.5 (1.9.1) 8.0 10.0 3.2 (525.3)
findAll() and find() No support No support No support No support No support No support
DocumentFragment() constructor 28.0 (Yes) 24.0 (24.0) No support 15.0 No support
ParentNode properties 28.0 No support 25.0 (25.0) No support 15.0 No support
ParentNode methods No support No support No support No support No support No support
                 
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
querySelector() and querySelectorAll() 2.1 (Yes) 1.0 (1.0) 8.0 10.0 3.2 (525.3)
findAll() and find() No support No support No support No support No support No support
DocumentFragment() constructor ? (Yes) 24.0 (24.0) No support ? ?
ParentNode properties (Yes) No support 25.0 (25.0) No support 5.0 No support
ParentNode methods No support No support No support No support No support No support

See also

Document Tags and Contributors

 Last updated by: stevenwdv,