XML DOM » Objects » DocumentFragment

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.

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.

Examples

Code:
XML:

<names>
   <name>Alice</name>
   <name>Bert</name>
   <name>Charlie</name>
   <name>Diane</name>
   <name>Eric</name>
</names>

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>");
Explanation:

To demonstrate how a DocumentFragment can be used, we 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.)

Language(s): JavaScript XML

Properties

attributes

Syntax: node.attributes

This is a read-only property that returns a NamedNodeMap for nodes that can have attributes.

baseName

Syntax: document.basename

This is a read-only property that returns the base name for a node.

childNodes

Syntax: node.childNodes

This is a read-only property containing a node list of all children for those elements that can have them.

dataType

Syntax: node.dataType

This is a read-only property that specifies the data type for the node.

definition

Syntax: node.definition

This property returns the definition of the node in the DTD or schema.

firstChild

Syntax: node.firstChild

This is a read-only property that returns the first child node of a node. If there is none, it returns null.

lastChild

Syntax: node.lastChild

This is a read-only property that returns the last child node of a node. If there is none, it returns null.

namespaceURI

Syntax: object.namespaceURI

This property is read-only and returns the URI (Universal Resource Indentifier) of the namespace.

nextSibling

Syntax: node.nextSibling

This property returns the next node in the parent's child list, or null if there is none or the node is of a type that cannot be a child node (Attr, Document, DocumentFragment).

nodeName

Syntax: node.nodeName

This property is read-only and contains the name of the node, depending on type.

nodeType

Syntax: node.nodeType

This property is read-only and contains the name of the node, depending on type.

nodeTypedValue

Syntax: node.nodeTypedValue

This property contains the value of this node expressed in its defined data type.

nodeTypeString

Syntax: node.nodeTypeString

This property is read-only and returns the node type in string form.

nodeValue

Syntax: node.nodeValue

This property contains the value of the node, depending on type.

ownerDocument

Syntax: node.ownerDocument

This property returns the Document object to which the node belongs. If the node itself is a document, then it returns null.

parentNode

Syntax: node.parentNode

This is a read-only property that returns the parent node of all nodes except Document, DocumentFragment and Attr, which cannot have parent nodes.

parsed

Syntax: node.parsed

This property returns a boolean value of true if this node and all of its descendants have been parsed and instantiated. Otherwise it returns false.

prefix

Syntax: object.prefix

Property This property is read-only and returns the namespace prefix, or an empty string if none is specified. For example, it would return 'xxx' for the element xxx:yyy.

previousSibling

Syntax: node.previousSibling

This property returns the previous node in the parent's child list, or null if there is none or the node is of a type that cannot be an child node (Attr, Document, DocumentFragment).

specified

Syntax: node.specified

This property returns a boolean value which indicates whether or not this attribute has a value specified in the XML document.

text

Syntax: node.text

This property contains the text content of this node and its subtrees.

xml

Syntax: node.xml

This property contains the XML representation of this node and its descendants.

Methods

appendChild

Syntax: node.appendChild(tagName)

This method appends a new child node to the list of children for this node.

cloneNode

Syntax: node.cloneNode(deep)

This method creates a clone node which is an exact replica of this node.

hasChildNodes

Syntax: node.hasChildNodes

This method is a convenient way to determine whether a node has child nodes, returning true if it has, and false if not.

insertBefore

Syntax: node.insertBefore(newChild, refChild)

This method is used to insert a new child node before an existing one. If no child node exists, the new child node becomes the first.

removeChild

Syntax: node.removeChild(oldChild)

This method removes the specified node from the list of children and returns it.

replaceChild

Syntax: node.replaceChild(newChild, oldChild)

This method is used to replace one of a node's children with another. It returns the old child.

selectNodes

Syntax: node.selectNodes(patternString)

This method creates a NodeList of all matching descendant nodes returned by the specified pattern-matching operation.

selectSingleNode

Syntax: node.selectSingleNode(patternString)

This method returns an object for the first descendant node to match the specified pattern.

transformNode

Syntax: node.transformNode(stylesheet)

This method processes this node and its descendants using the specified XSL stylesheet, and returns the resulting transformation.

transformNodeToObject

Syntax: node.transformNodeToObject(stylesheet, outputObject)

This method processes this node and its descendants using the specified XSL stylesheet, and returns the resulting transformation in the specified object.

See Also: