{{ ApiRef() }}
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, not the fragment itself.
This interface is also of great use with Web components: {{HTMLElement("template")}} elements contains 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', '#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 | {{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}} |
{{CompatUnknown}} | {{CompatGeckoMobile("24.0")}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} |
ParentNode properties {{experimental_inline}} |
28.0 | {{CompatGeckoMobile("25.0")}} | {{CompatNo}} | 5.0 | {{CompatNo}} |
ParentNode methods {{experimental_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |