XML —

Updating the DOM Tree

Not only does the DOM enable you to access an XML data structure in a number of ways, but it also enables you to alter an XML data structure. Rather than providing you with another lengthy program example that explains how to alter the DOM tree, I'll just show you some specific examples that demonstrate how such tasks are performed. Note that if you were using a language other than JavaScript, you could store the updated DOM tree on disk once the tree has been updated. However, JavaScript runs within the context of a web browser and has no access to the file system, so any changes you make to a DOM tree in a JavaScript program will be lost as soon as you leave that page.

First, let's look at how you can access a specific node in a tree. In the earlier examples in this tutorial, you saw how to iterate over all of the children of a particular node. You will probably want to be more specific when you're updating the tree. The key method in taking more exacting control of the document tree is the item() method of the NodeList interface. When you call the item() method and supply it with an index, it returns the node associated with that index. Let's say you have the document node of a DOM tree assigned to the variable xmlDoc. To access the root level element of the document, you can use the following code:

xmlDoc.childNodes.item(0);

Or, if you prefer, simply

xmlDoc.childNodes.firstChild;

In order to be valid XML, you can have only one element at the top level of your tree, so when you want to add a node, you need to add it to the root element. You can assign the root element to a variable like this:

var root = xmlDoc.childNodes.firstChild;

After you've done that, you can add an element as its child. However, first you'll need an element node. You can create one using the document object, like this:

var newElement = xmlDoc.createElement("automobile");

Then, you can add it to your tree, like this:

root.appendChild(newElement);

If you want, you can then add an attribute to the node you just inserted into the tree:

var attr = doc.createAttribute("make");
attr.text = "Suburu";
root.childNodes.lastChild.setAttributeNode(attr);

First, you create an attribute just like you created the element before. Then you set its value, and finally you add it to the element you just added to the tree. Note that the lastChild() method is used to access the node you just added. Because you just appended the node to the tree, you know that it's the last child of the root element. It's just as easy to update and remove items in the DOM. To update the attribute you just added, you just need to access it in the DOM tree and change its value, like so:

root.childNodes.lastChild.setAttribute("make", "BMW");

As you can see, there's a method specifically used to update a named attribute. To remove that attribute, just call the following method:

root.childNodes.lastChild.removeAttribute("make");

Now let's look at updating and removing elements themselves. There are two ways to do soyou can replace child nodes or remove them. First, let's look at replacing them. In order to replace an element, you'll need to create a new element to put in place of the old one, and then call the method that swaps them:

var replacementElem = xmlDoc.createElement("customer");
var oldNode = root.replaceChild(replacementElem, root.childNodes.lastChild);

As you can see, to replace a child of a node, you just have to pass in the new node and a reference to the node that will be replaced. The node that was replaced is assigned to the variable oldNodeif you want to do something else with it. Removing a node is even easier:

var anotherOldNode = root.removeChild(root.childNodes.lastChild);

The node that was removed is assigned to the variable anotherOldNode.

Hopefully this brief introduction to document tree manipulation has given you some ideas about how to go about using the DOM to tinker with your own XML documents.