XML and JavaScript in Mozilla

Load the XML File for Mozilla and IE

Most of the manipulation techniques used for Mozilla will also work with IE. However, the XML file is loaded differently in each, so let’s look at a function that will load an XML file in Mozilla as well as IE:

var xmlDoc;  
function importXML(file) {  
 var xmlDoc;  
 var moz = (typeof document.implementation != 'undefined') && (typeof  
document.implementation.createDocument != 'undefined');  
 var ie = (typeof window.ActiveXObject != 'undefined');  
 
 if (moz) {  
   xmlDoc = document.implementation.createDocument("", "", null)  
   xmlDoc.onload = readXML;  
 } else if (ie) {  
   xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
   xmlDoc.async = false;  
   while(xmlDoc.readyState != 4) {};  
 }  
 xmlDoc.load(file);  
}

The above function can be used to load an XML file for both Mozilla and IE. Now, to load a XML file, the function must be called as:

importXML("YourXMLFile.xml");

Note that the variable ie is used to test for IE. IE uses an ActiveX Object to load an XML file using the Microsoft.XMLDOM object. In the following section, we’ll explore a few methods we can use to access the XML file data.

getElementsByTagName()

The getElementsByTagName method is the most commonly used method available in the XML DOM (Document Object Model) object. As the function's name suggests, this function returns all the elements (or tags) with the given name within the specified element. Basically, it returns an object collection. For example:

var xmlFile = xmlDoc.getElementsByTagName("company");

In the above code, an object collection containing all the <company> elements in the document is stored in the variable xmlFile. Note that the argument you pass to getElementsByTagName() is case-sensitive, i.e. getElementsByTagName("company") is different from getElementsByTagName("ComPanY").

Find the Number of Elements of a Tag

In the XML file illustrated at the beginning of this article, we see exactly one <company> tag. The object collection returned by getElementsByTagName() has a length method that gives the number of elements in the collection. For example, to find the number of <company> tags, the following code is used:

var noOfCompanyTags = xmlDoc.getElementsByTagName("company").length;

Displaying the variable noOfCompanyTags using document.write() will display 1.

Display the Content of a Tag

Again referring to the XML file, suppose we want to display the name of the first employee. Now, the <employee> tag is within the <company> tag; so, first we need to get the collection of all the <company> tags, and through this tag get a collection of all <employee> tags. Let’s take a look at how to display the name step by step:

var companies = xmlDoc.getElementsByTagName("company");

The above code returns an object collection for the <company> tag to the companies variable. Note that companies is an array.

var employees = companies[0].getElementsByTagName("employee");

The above code returns an object collection for the <employee> tag to the employees variable, again in an array. Note the index used in the company variable; this is used because we need to access only the first element of the array. There may only be one <company> tag, but it's still an array, so we use the index 0 to get the element.

To display the name of the first employee, we use the following code:

document.write(employees[0].firstChild.nodeValue);

The above code will display Premshree Pillai. As is clear, employees is a 3-element array. So, to display the name of the second employee, the code would be:

document.write(employees[1].firstChild.nodeValue);

The above code will display Kumar Singh. All the above steps we used to display the employee name (Premshree Pillai) can be integrated into a single code snippet as follows:

document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]  
.firstChild.nodeValue);