The DocumentFragment object represents a light-weight
Document object, which can hold a portion of an existing
document's tree, or a new fragment which can then be inserted into a document. As such it is
very useful for 'cut and paste' operations. A DocumentFragment can be a child of a
Document object, whereas another document cannot be.
One particularly useful feature, especially when adding sibling nodes to a document, is
that when used in insert operations it is the child nodes that are inserted rather
than the DocumentFragment itself. The DocumentFragment just acts as the parent of these
nodes so that standard Node methods such as
appendChild and
insertBefore can be used.
The children of a DocumentFragment node are zero or more nodes representing the tops
of any sub-trees defining the structure of the document. A DocumentFragment does
not need to be a well-formed XML document, but it does need to comply with the rules imposed
upon well-formed XML parsed entities, which can have multiple top nodes. For example, a
DocumentFragment could have only one child consisting of a Text
node, which represents neither an HTML document nor a well-formed XML document.
To demonstrate how a DocumentFragment can be used, we shall create one for the
'names.xml' file to which we shall add three child nodes consisting of new 'name' elements.
The whole entity will then be inserted into an appropriate place among the children of the
document's root element. Finally the values of all the 'name' elements will be displayed.
(The code uses a user-defined function to create and add the child nodes to the
DocumentFragment.)
XML:
<names>
<name>Alice</name>
<name>Bert</name>
<name>Charlie</name>
<name>Diane</name>
<name>Eric</name>
</names>
Code (JavaScript):
xml_doc = new ActiveXObject("Microsoft.XMLDOM");
xml_doc.async = false;
xml_doc.load("names.xml");
function add_elem(frag, elem, text)
{
var new_elem = xml_doc.createElement(elem);
var new_text = xml_doc.createTextNode(text);
new_elem.appendChild(new_text);
frag.appendChild(new_elem);
}
doc_frag = xml_doc.createDocumentFragment();
add_elem(doc_frag, "name", "Billy");
add_elem(doc_frag, "name", "Bobby");
add_elem(doc_frag, "name", "Bonnie");
root = xml_doc.documentElement;
root.insertBefore(doc_frag, root.childNodes.item(2));
names = xml_doc.getElementsByTagName("name");
n_names = names.length;
for (i = 0; i < n_names; i++)
document.write(names[i].firstChild.nodeValue + "<br>");
Output:
Alice
Bert
Billy
Bobby
Bonnie
Charlie
Diane
Eric
A DocumentFragment has no methods or properties of its own, but as a
Node it inherits various of that object's properties and
methods. For details of the values returned by the
nodeName,
nodeType and nodeValue
properties for a DocumentFragment, see the Node object.
denotes a Microsoft extension to the W3C DOM.
PROPERTIES
attributes Property
This is a read-only property that returns an
NamedNodeMap for nodes that can have
attributes.
Syntax: Node.attributes
baseName Property
This is a read-only property that returns the base name for a node.
Syntax: Node.baseName
childNodes Property
This is a read-only property containing a node list of all children for those elements that
can have them.
Syntax: Node.childNodes
dataType Property
This is a read-only property that specifies the data type for the node.
Syntax: Node.dataType
definition Property
This property returns the definition of the node in the DTD or schema.
Syntax: Node.definition
firstChild Property
This is a read-only property that returns the first child node of a node. If there is none,
it returns null.
Syntax: Node.firstChild
lastChild Property
This is a read-only property that returns the last child node of a node. If there is none,
it returns null.
Syntax: Node.lastChild
namespaceURI Property
This property is read-only and returns the URI (Universal Resource Indentifier) of the
namespace.
Syntax: Node.namespaceURI