| home / programming / prof_ajax / 1 |    [previous][next] |
|
|
|
What if your current node is a book element and you want to select another book element? The <book/> elements are siblings to each other because they share the same direct parent. Two properties,
nextSibling and previousSibling, exist to select adjacent nodes to the current node. The
nextSibling property references the next occurring sibling, whereas the previousSibling property
selects the preceding sibling:
In this code, the second <book/> element is referenced and assigned to oSecondBook. The oFirstBook2 variable is then reassigned to reference the oSecondBook sibling immediately before it, resulting in oFirstBook2 to contain the same value as it did before. If a node has no siblings after it, then nextSibling is null. The same holds true for previousSibling; if there is no sibling immediately
before the current node, previousSibling is null.
Now that you know how to traverse through the document hierarchy, you should know how to retrieve data from nodes in the tree. For example, to retrieve the text contained within the third <book/> element, you could use the text property, as follows:
var sText = oRoot.childNodes[2].text; |
The text property retrieves all the text nodes contained within this node and is a Microsoft proprietary
property, but it is extremely helpful. Without the text property, you would have to access the text node
as follows:
var sText = oRoot.childNodes[2].firstChild.nodeValue; |
This code achieves the same results as using the text property. Like the previous example, the third
<book/> element is referenced using the childNodes collection; the text node of the <book/>; element is
then referenced with the use of firstChild because a text node is still a node in the DOM. The text is
then retrieved by using the nodeValue property that retrieves the value of the current node.
The results from these two examples are identical; however, the text property behaves in a different
way than using the nodeValue property on a text node. The text property retrieves the value of all text
nodes contained within the element and its children, whereas the nodeValue property gets only the
value of the current node. It is a helpful property, but it has the potential to return more text than
desired. For example, consider this modified XML document:
This new XML document adds two new children to the first <book/> element: the <title/> element, which contains the title of the book, and the <author/> element, which holds the author data. Once again, use the text property:
alert(oFirstChild.text);
|
There is nothing new in this code, as you have already seen it. However, look at the results, as shown in Figure 4-1.
Notice that the text nodes from the <title/> and <author/> elements are retrieved and concatenated. This is how text differs from nodeValue. The nodeValue property retrieves only the value of the current node, whereas the text property retrieves all text nodes contained in the current node and its children.
MSXML also provides a number of methods to retrieve specific nodes or values; the two most often used
are getAttribute() and getElementsByTagName().
The getAttribute() method takes a string argument containing the name of the attribute and returns
that attribute’s value. If the attribute does not exist, the value returned is null. Using the same XML
document introduced earlier in this section, consider the following code:
This code retrieves the value of the isbn attribute of the first <book/> element and assigns it to the sAttribute variable. This value is then used in the alert() method to display the value.
The getElementsByTagName() method returns a NodeList of child elements with the name specified
by its argument. This method searches for elements within the given node only, so the returned
NodeList does not include any external elements. For example:
This code retrieves all <book/>; elements within the document and returns the NodeList to cBooks. With the sample XML document, an alert box will display that four <book/>; elements were found. To retrieve all child elements, pass “*” as the parameter to getElementsByTagName(), as follows:
var cElements = oRoot.getElementsByTagName(“*”); |
Because the example XML document contains only <book/> elements, the resulting NodeList of this code sample matches that of the previous example.
Retrieving XML data is as simple as using a property, the xml property. This property serializes the XML
data of the current node. Serialization is the process of converting objects into an easily storable or transmittable
format. The xml property converts XML into a string representation, complete with tag names,
attributes, and text:
This code serializes the XML data starting with the document element, which is then passed to the
alert() method. A portion of the serialized XML looks like this:
<books><book isbn=”0471777781”>Professional Ajax</book></books>
|
You can load serialized data into another XML DOM object, send to a server application, or pass to another page. The serialized XML data returned by the xml property depends on the current node. Using the xml property at the documentElement node returns the XML data of the entire document, whereas using it on a <book/> element returns only the XML data contained in that <book/> element.
The xml property is read-only. If you want to add elements to the document, you will have to use DOM
methods to do so.
Until this point, you have learned how to traverse the DOM, extract information from it, and convert XML into string format. You also have the ability to add to, delete from, and replace nodes in the DOM.
You can create a variety of nodes using DOM methods, the first of which is an element with the
createElement() method. This method takes one argument, a string containing the tag name of the
element to create, and returns an XMLDOMElement reference:
This code creates a new <book/> element and appends it to documentElement with the
appendChild() method. The appendChild() method appends the new element, specified by its argument,
as the last child node. This code, however, appends an empty <book/> element to the document,
so the element needs some text:
This code creates a text node with the createTextNode() method and appends it to the newly created
<book/> element with appendChild(). The createTextNode() method takes a string argument specifying
the value applied to the text node.
At this point, you have programmatically created a new <book/> element, provided it a text node, and
appended it to the document. One last piece of information is required to get this new element on par
with its other siblings, the isbn attribute. Creating an attribute is as simple as using the
setAttribute() method, which is available on every element node:
The new line of code in this example creates an isbn attribute and assigns it the value of 0764559885.
The setAttribute() method takes two string arguments: the first is the name of the attribute, and the
second is the value to assign to the attribute. IE also provides other methods to add attributes to an element;
however, they hold no real advantage over setAttribute() and require much more coding.
If you can add nodes to a document, it seems only natural to be able to remove them as well. The
removeChild() method does just that. This method has one argument: the node to remove. Suppose,
for example, that you want to remove the first <book/> element from the document. You could use the
following code:
var oRemovedChild = oRoot.removeChild(oRoot.firstChild); |
The removeChild() method returns the removed child node, so oRemoveChild now references the
removed <book/> element. You now have a reference to the old node, so you can place it anywhere else
into the document.
Perhaps you want to replace the third <book/> element with oRemovedChild. The replaceChild()
does that and returns the replaced node:
var oReplacedChild = oRoot.replaceChild(oRemovedChild, oRoot.childNodes[2]); |
The replaceChild() method accepts two arguments: the node to add and the node to replace. In this
code, the node referenced by oRemovedChild replaces the third <book/> element, and the replaced
node is now referenced by oReplacedChild.
Because oReplacedChild references the replaced node, you can easily insert it into the document. You
could use appendChild() to add the node to the end of the child list, or you can use the
insertBefore() method to insert the node before another sibling:
oRoot.insertBefore(oReplacedChild, oRoot.lastChild); |
This code inserts the previously replaced node before the last <book/> element. You'll notice the use of
the lastChild property, which retrieves the last child node, much like firstChild selects the first
child node. The insertBefore() method takes two arguments: the node to insert and the node to
insert before. This method also returns the value of the inserted node, but it is not necessary for this
example.
As you have seen, the DOM is a powerful interface from which you can retrieve, remove, and add data.
| home / programming / prof_ajax / 1 | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
March 6, 2006
URL: http://webreference.com/programming/prof_ajax/1
