|
|
Getting friendly with DOM
Posted On July 2, 2007 by Ramdas S filed under Internet
There are a number of such objects in the DOM model and it is important to understand some of these in detail.
While some objects have been discussed earlier, we will discuss these in greater detail now. Each object has a list of properties and methods associated with it. While implementing the DOM model in some of the languages, developers have also introduced several methods that are specific to those languages.
Also, there exist a number of methods that are specific to Microsoft Internet Explorer and the Microsoft ActiveX object Microsoft.DOMXML.
Node Objects
We have already seen the properties of Node objects and a few methods. Table 1 lists some of the methods used in Node objects. You have to visualize the node object as a node in the node-tree.
| Method | Description |
| appendChild(newnode) | Appends a new child node to a node. |
| cloneNode(boolean) | Creates an exact clone node of a node. If the Boolean parameter is set to true, the cloned node clones all the child nodes of the original node as well. |
| hasChildNodes() | Returns true if a node has child nodes. Otherwise it returns false. |
| insertBefore(newnode,refnode) | Inserts a new node (newnode) before the existing node (refnode). |
| removeChild(nodename) | Removes the specified node and returns it. |
| replaceChild(newnode,oldnode) | Replaces the oldnode with the newnode and returns the oldnode. |
Table 1: Common Methods found in Node Objects
You can write a simple program that traverses the nodes and prints the names of child nodes using VBScript. You can use a simple for each next loop and print the nodeName, which is a read only property of Node object.
<html>
<body>
<script type="text/vbscript">
set xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("book.xml")
for each x in xmlDoc.documentElement.childNodes
document.write(x.nodeName & "<br />")
next
</script>
</body>
</html>
Document Objects
Document object is the root element in the node-tree. All nodes in the node-tree are child nodes of the Document object; Document object has a number of properties and methods that are common to that in Node objects. Table 2 provides a list of the common properties.
| createAttribute(attrname) | Creates an Attr node with the specified name. |
| createCDATASection(text) | Creates a CDATASection node, containing the specified text. |
| createComment(text) | Creates a comment node, containing the specified text. |
| createDocumentFragment() | Creates an empty documentFragment object. |
| createElement(tagname) | Creates an element node with the specified name. |
| createEntityReference(refname) | Creates an entityReference node with the specified name. |
| createProcessingInstruction(target,text) | Creates a processingInstruction node containing the specified target and text. |
| createTextNode(text) | Creates a text node containing the specified text. |
| getElementsByTagName(tagname) | Returns the specified node and all its child nodes, as a node list. |
| hasChildNodes() | Returns true if a node has child nodes. Otherwise it returns false. |
| insertBefore(newnode,refnode) | Inserts a new node (newnode) before the existing node (refnode). |
| removeChild(nodename) | Removes the specified node and returns it. |
| replaceChild(newnode,oldnode) | Replaces the oldnode with the newnode and returns the oldnode. |
Table 2: Some methods in Document objects
Note that Table 2 is neither exclusive nor exhaustive. Some of the methods are very similar to those found in Node Objects. It is hence advisable to check your favorite language’s documentation to figure out the implementation.
Here is a little Python program that prints the authors in book.xml. We use the getElementsByTagName method in the minidom module in Python. Refer code 1.
Code 1
>>> from xml.dom import minidom
>>> xmlDoc = minidom.parse("book.xml")
>>> nodelist = xmlDoc.getElementsByTagName("author")
>>> for i in range(len(nodelist)):
... print nodelist[i].firstChild.wholeText
...
Mark Twain
Element Object
The Element object represents Element nodes in the document. If the Element node contains text, this text is represented in a text node. The Element Object again supports many of the properties and methods supported by Node object.
Let us write a simple VBScript program to change the attribute. This can only be displayed in Internet Explorer. Refer code 2.
Code 2
<html>
<body>
<script type="text/vbscript">
set xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("book.xml")
set x=xmlDoc.getElementsByTagName("book")
call x.item(0).setAttribute("type","E-Book")
document.write("<xmp>" & xmldoc.xml & "</xmp>")
</script>
</body>
</html>
Try to display the document. You will get a result, which looks more or less like the one given below.
<?xml version="1.0"?>
<book type="E-Book">
<name> Tom Sawyer </name>
<author> Mark Twain </author>
</book>
DOM for the Mozilla browser
As mentioned in the last article, FireFox or Mozilla browsers do not understand Microsoft ActiveX objects. They use a technology called Gecko.
Netscape 6.1, Mozilla and other Mozilla-based browsers have identical implementations of the DOM. This is so because they use the same technology.
Gecko, the software component in these browsers that handles the parsing of HTML, layout of the pages, Document Object Model and even the rendering of the entire application interface, is a fast, standards-compliant rendering engine that implements the W3C DOM standards and DOM-like (but not standardized) browser object model (i.e., window et al) in the context of web pages and the application interface, or chrome, of the browser.
Though the application interface and the content displayed by the browser are different in many practical ways, the DOM exposes them uniformly as a hierarchy of nodes.
Use the following snippet (code 3) to test whether your FireFox supports the Gecko component.
Code 3
<html>
<title> My Page </title>
<script>
function testWinDoc() {
doc= window.document;
alert(doc.title);
}
</script>
<button onclick="testWinDoc();">
test document property</button>
</html>
Plain XML documents are displayed in a tree-like structure in Mozilla (just like in IE).
Mozilla also supports parsing of XML data using JavaScript. The parsed data can be displayed as HTML.
To create an instance of the XML parser with JavaScript in Mozilla browsers, use the following code:
var xmlDoc=document.implementation.createDocument("ns","root",null)
The first parameter, ns, defines the namespace used for the XML document. While the second parameter, root, is the XML root element in the XML file, the third, null, is always null because it is not implemented yet.
Code 4 below prints the childNodes in the Mozilla browser!
Code 4
<html>
<body>
<script type="text/javascript">
xmlDoc= document.implementation.createDocument("","",null);
xmlDoc.load("book.xml");
document.write("The first child element in the file contains: " +
xmlDoc.documentElement.childNodes(0).text)
document.write("<br />")
document.write("The second child element in the file contains: " +
xmlDoc.documentElement.childNodes(1).text)
</script>
</body>
</html>
We have seen some examples in this article. In the next (November issue), we will look in detail into the world of XmlHTTPRequest and Ajax. We will also take up Systems.XML class in .Net framework.