WEEK 9: DOCUMENT OBJECT MODEL

LINKS TO XML RELATED SITES

1. XML IE5 BOOK WEBSITE
2. XML.COM
3. MICROSOFT'S IE5 DEVELOPER SITE
4. MSDN'S XML DEVELOPER SITE
5. IBM'S XML WEBSITE
6. IBM'S ALPHAWORKS WEBSITE

1. Document Node Document Object Model, is an agreed on standard of a syntax used to traverse and access the parsed XML document. Here is the idea: when the XML parser parses a document, there needs to be a way or method for obtaining the tags and/or the data which is inside those tags. Since XML has and will become the standard for storing and transferring data and information across the net, there needs to be a standard for parsing and accessing data in an XML document. This standard is the Document Object Model.

   DOM, allows the users to access the data in a manner which is very similar to accessing a property of an object in object-oriented or object-based languages such as Java or JavaScript. What DOM specifies, is the mapping of the natural tree-like hierarchy of an XML document into a set of APIs (methods and properties) which interfaces the document.

   IE5 does support the DOM standard specified by the W3C (World Wide Web Consortium) plus they have added some of their own. In order to get access to the DOM in IE5 we first need to obtain a reference to the XML document. To obtain the reference we first need to identify our XML islands by assigning to the "id" attribute of the XML tag. Second we need get the node inside the JavaScript portion of our page with "node = document.all("document_id").XMLDocument".

   Once we have the reference to the XML document we can then traverse the document tree using DOM.

   Please note, in this example we are only obtaining a reference to the node and nothing more.

2. Using the XML Reference The reference to the XML document is an object. To illustrate this we have passed the XML reference, "students_document_node" as an argument to the "alert()" method. Then upon loading the page we make a call to a wrapper function, "extract_xml" which calls the alert().
3. Traversing Down the XML Reference DOM, has been specified to take advantage of the hierarchical structure of the XML document. The reference to the XML document, "students_document_node" points to the "<XML>" tag.

   To move one step down, or inside the "<XML>" in order to get to the actual XML document we need to reference the "firstChild" of the XML reference, "students_document_node.firstChild". In our example the XML processing instruction, "<?xml version="1.0"? >" is the first thing inside the "<XML>" tag therefore, "students_document_node.firstChild" is pointing to that.

   To point to the root tag "<students>" we need to look (not further down) beside or at the "nextSibling" of the "<?xml version="1.0"? >", by "students_document_node.firstChild.nextSibling".

   At this point, we have made a reference to "<students>". To traverse inside the "<students>" we need to get a reference to its "firstChild" by, "students_document_node.firstChild.nextSibling.firstChild" statement. The firstChild might be another tag or it might be data. In this case it is data. To obtain the value that is inside of the "<students>" we need to reference the "nodeValue" property of the "firstChild" of students, "students_document_node.firstChild.nextSibling.firstChild.nodeValue".

   As you can see "James" was retrieve and was passed to the alert() method.

4. Problems with using Siblings and The above example would work just fine, as long as we always keep the processing instruction. However, if it gets removed (it is not required after all) then the entire tree structure would be rearranged. As you can see in this example, the only thing different than the above example, is that we have removed the processing instruction. As the result, we are getting errors when the page loads.
5. Getting Elements By Tag Names As you saw in the above example, slightest change to the order of the document would cause an error to the parser. Fortunately DOM provides other ways of getting to a document.

   The method, "getElementsByTagName(elementName)" returns a nodeList. A nodeList, as its name implies is an object that contains a collection of nodes. The nodeList has several methods among them is "item(index)" that would return a node at that "index". Upon obtaining a node we can then traverse down to the "firstChild" of the node and then its "nodeValue", "students_document_node.getElementsByTagName("students").item(0).firstChild.nodeValue". The result is same as our third example with the exception that adding or removing of processing instruction would not affect the parsing of the document.

6. Getting All The Values One of the properties of the node object is "text". This property contains the values inside all the tags under the node. In this example we are displaying all the text inside the "<students>".

   Keep in mind this property is not part of the DOM specification and therefore it is only supported by the IE5 browsers.

1. Attributes So far we have talked about everything, but attributes. The node object has a property "attributes" that contains a reference to a NamedNodeMap object. This object contains a list of attributes much the same way NodeList object contained a list of nodes.

   Since attributes are in many ways are like tags, they are practically treated as such. Once we obtain the NamedNodeMap object we can get to the individual attributes as "node" objects by calling the "item(index)", or "getNamedItem(attributeName)" methods.

   In our example we have used "getNamedItem(attributeName)" method. Since this method returns a node object we had to go through the same procedure as we had done for other nodes to obtain its value, "class_attribute.firstChild.nodeValue".

2. All The Children Very often we would need to get the list of all the children. To obtain this information we can call the "childNodes" property of the node object which contains a reference to a NodeList object. We then obtained the number of tags that are direct children of the "<students>" by referencing the "length" property of the "NodeList" object.
3. nodeName In this example we are referring to the "nodeName" property of the node object. In our example we are returning the node name of the "<students>" tag, which is "students". This is not a practical example, as we already know the name of the tag.
4. lastChild We have shown example of the "firstChild" property, but we have not shown the "lastChild" property yet. In this example we have obtained the "<age>" tag by using the "lastChild" property.
5. hasChildNodes() Although the node object has several methods we are only going to talk about on of them here, the hasChildNodes() method. As its name suggest, this method will return true if the node has children nodes.

1. Lopping Through All the Children In this example we are using the length attribute of the NodeList object to loop through the list of all the children nodes.
2. Recursive Approach In this example we are doing the same thing as above, but instead we are taking a recursive approach instead of an iterative one.
3. Writing To HTML One of the things that we can do on IE5 is to use the "innerHTML" of tag and write to it. In this example we have created a "DIV" with id of "stage" that we can then write the parsed XML document to it.
4. Writing to TD Tags This example takes the same approach as above, but instead of writing to a "DIV" we are writing to three different "TD" tags. Also, worth noting is the way we have used nextSibling property of the node object.
5. Writing to Forms In this example we are writing to text input boxes. Also, worth noting is the use of item() as method of NodeList object.

1. Returning The Value of a Tag In this example we can place any of the tag names "first_name", "last_name", or "age" to obtain the value of that tag.
2. Scrolling Through a List There are numerous details that you need to go over in this example. View the code and the comments in the code.
3. Searching A list There are numerous details that you need to go over in this example. View the code and the comments in the code.