The DocumentFragment interface represents a minimal document object that has no parent. It is used as a light-weight version of Document to store well-formed or potentially non-well-formed fragments of XML.
Various other methods can take a document fragment as an argument (e.g., any Node interface methods such as Node.appendChild and Node.insertBefore), in which case the children of the fragment are appended or inserted, not the fragment itself.
This interface is also of great use with Web components: <template> elements contains 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 property, but inherits those of its parent, Node, and implements those of the ParentNode interface.
ParentNode.childrenRead only- Returns a live
HTMLCollectioncontaining all objects of typeElementthat are children of theDocumentFragmentobject. ParentNode.firstElementChildRead only- Returns the
Elementthat is the first child of theDocumentFragmentobject, ornullif there is none. ParentNode.lastElementChildRead only- Returns the
Elementthat is the last child of theDocumentFragmentobject, ornullif there is none. ParentNode.childElementCountRead only- Returns an
unsigned longgiving the amount of children that theDocumentFragmenthas.
Constructor
DocumentFragment()- Returns an empty
DocumentFragmentobject.
Methods
This interface inherits the methods of its parent, Node, and implements those of the ParentNode interface.
DocumentFragment.find()- Returns the first matching
Elementin the tree of theDocumentFragment. DocumentFragment.findAll()- Returns a
NodeListof matchingElementin the tree of theDocumentFragment. DocumentFragment.querySelector()- Returns the first
Elementnode within theDocumentFragment, in document order, that matches the specified selectors. DocumentFragment.querySelectorAll()- Returns a
NodeListof all theElementnodes within theDocumentFragmentthat match the specified selectors.
DocumentFragment.getElementById()- Returns the first
Elementnode within theDocumentFragment, 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 | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
querySelector() and querySelectorAll() |
1.0 | 3.5 (1.9.1) | 8.0 | 10.0 | 3.2 (525.3) |
findAll() and find() |
Not supported | Not supported | Not supported | Not supported | Not supported |
DocumentFragment() constructor |
28.0 | 24.0 (24.0) | Not supported | 15.0 | Not supported |
ParentNode properties |
28.0 | 25.0 (25.0) | Not supported | 15.0 | Not supported |
ParentNode methods |
Not supported | Not supported | Not supported | Not supported | Not supported |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
querySelector() and querySelectorAll() |
2.1 | 1.0 (1.0) | 8.0 | 10.0 | 3.2 (525.3) |
findAll() and find() |
Not supported | Not supported | Not supported | Not supported | Not supported |
DocumentFragment() constructor |
? | 24.0 (24.0) | Not supported | ? | ? |
ParentNode properties |
(Yes) | 25.0 (25.0) | Not supported | 5.0 | Not supported |
ParentNode methods |
Not supported | Not supported | Not supported | Not supported | Not supported |