{{ ApiRef("DOM") }}
The DocumentFragment
interface represents a minimal document object that has no parent. It is used as a light-weight version of {{domxref("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 {{domxref("Node")}} interface methods such as {{domxref("Node.appendChild")}} and {{domxref("Node.insertBefore")}}), in which case the children of the fragment are appended or inserted at the location in the DOM where you insert the document fragment, not the fragment itself. The fragment itself continues to exist (in memory) but now has no children.
This interface is also of great use with Web components: {{HTMLElement("template")}} elements contain a DocumentFragment
in their {{domxref("HTMLTemplateElement.content")}} property.
An empty DocumentFragment
can be created using the {{domxref("document.createDocumentFragment")}} method or the constructor.
Properties
This interface has no specific property, but inherits those of its parent, {{domxref("Node")}}, and implements those of the {{domxref("ParentNode")}} interface.
- {{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
- Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of the
DocumentFragment
object. - {{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
- Returns the {{domxref("Element")}} that is the first child of the
DocumentFragment
object, ornull
if there is none. - {{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
- Returns the {{domxref("Element")}} that is the last child of the
DocumentFragment
object, ornull
if there is none. - {{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
- Returns an
unsigned long
giving the amount of children that theDocumentFragment
has.
Constructor
- {{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
- Returns an empty
DocumentFragment
object.
Methods
This interface inherits the methods of its parent, {{domxref("Node")}}, and implements those of the {{domxref("ParentNode")}} interface.
- {{domxref("DocumentFragment.find()")}} {{experimental_inline}}
- Returns the first matching {{domxref("Element")}} in the tree of the
DocumentFragment
. - {{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}
- Returns a {{domxref("NodeList")}} of matching {{domxref("Element")}} in the tree of the
DocumentFragment
. - {{domxref("DocumentFragment.querySelector()")}}
- Returns the first {{domxref("Element")}} node within the
DocumentFragment
, in document order, that matches the specified selectors. - {{domxref("DocumentFragment.querySelectorAll()")}}
- Returns a {{domxref("NodeList")}} of all the {{domxref("Element")}} nodes within the
DocumentFragment
that match the specified selectors.
- {{domxref("DocumentFragment.getElementById()")}}
- Returns the first {{domxref("Element")}} node within the
DocumentFragment
, in document order, that matches the specified ID.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}} | {{Spec2('DOM WHATWG')}} | Added the constructor and the implementation of {{domxref("ParentNode")}}. |
{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}} | {{Spec2('Selectors API Level 2')}} | Added the find() and findAll() methods. |
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}} | {{Spec2('Selectors API Level 1')}} | Added the querySelector() and querySelectorAll() methods. |
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM3 Core')}} | No change from {{SpecName('DOM2 Core')}} |
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM2 Core')}} | No change from {{SpecName('DOM1')}} |
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM1')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoDesktop("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
querySelector() and querySelectorAll() |
1.0 | {{CompatGeckoDesktop("1.9.1")}} | 8.0 | 10.0 | 3.2 (525.3) |
findAll() and find() {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
DocumentFragment() constructor {{experimental_inline}} |
28.0 | {{CompatGeckoDesktop("24.0")}} | {{CompatNo}} | 15.0 | {{CompatNo}} |
ParentNode properties {{experimental_inline}} |
28.0 | {{CompatGeckoDesktop("25.0")}} | {{CompatNo}} | 15.0 | {{CompatNo}} |
ParentNode methods {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
querySelector() and querySelectorAll() |
2.1 | {{CompatGeckoMobile("1.0")}} | 8.0 | 10.0 | 3.2 (525.3) |
findAll() and find() {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
DocumentFragment() constructor {{experimental_inline}} |
{{CompatUnknown}} | {{CompatGeckoMobile("24.0")}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} |
ParentNode properties {{experimental_inline}} |
{{CompatVersionUnknown}} | {{CompatGeckoMobile("25.0")}} | {{CompatNo}} | 5.0 | {{CompatNo}} |
ParentNode methods {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |