By: Premshree Pillai

January 7th, 2004

Reader Rating: 8

In my article, "Read and Display Server-Side XML with JavaScript [1]", I discussed the manipulation of XML files using JavaScript in Microsoft Internet Explorer. In this article, I’ll explain how to read and use XML file data using JavaScript in Mozilla. We will see how to display tag values, tag attribute values, and more.

Henceforth, I won't explicitly mention Mozilla in this article, because we will be dealing with Mozilla only, which includes Netscape 6.x, 7.x. I’ll let you know specifically when I’m referring to Microsoft Internet Explorer (MSIE, or simply IE), however.

The Sample XML File

I'll use the same XML file that I used in my last article, so it's easier for those who have already dealt with that file to understand. Consider the following XML file:

<?xml version="1.0" ?>  
<company>
 <employee id="001" sex="M" age="20">Premshree Pillai</employee>
 <employee id="002" sex="M" age="24">Kumar Singh</employee>
 <employee id="003" sex="M" age="21">Ranjit Kapoor</employee>
 <turnover>
   <year id="2000">100,000</year>
   <year id="2001">140,000</year>
   <year id="2002">200,000</year>
 </turnover>
</company>

As you can see, the above XML file shows a company's employees' details, with the name as the tag <employee>'s main (or node) value; other details such as an employee’s id, sex and age are given as attributes id, sex and age within the same tag. The file also shows the company's turnover, with the turnover figure as the tag <turnover>'s node value, and the year as an attribute year within the same tag.

In the sections that follow, we’ll manipulate the above XML file, so that it makes sense to us.

XML and JavaScript

Before we actually get into reading and further manipulating the XML file, it’s important to know whether the visitor is using Mozilla or some other browser.

Test for Mozilla

Obviously, you will not be coding your XML-based JavaScript application for one particular browser, when you can so easily extend support for other browsers. Yet, the way you code your application will depend on which browser the visitor is using.

To test for Mozilla, we can use a simple variable as follows:

var moz = (typeof document.implementation != 'undefined') && (typeof
document.implementation.createDocument != 'undefined');

The above variable can be used as a boolean variable:

if(moz) {
 // Mozilla!!
} else {
 // Something else...
}

Load the XML File

Once we’ve identified the browser, it's time to load the XML file:

var xmlDoc=document.implementation.createDocument("", "doc", null)
xmlDoc.load("someXMLFile.xml");
xmlDoc.onload = someProcessingFunction;

The first line in the above code creates an instance of the xmlDoc object; the second line loads the XML file we want (someXMLFile.xml, in this case); the third line is used to further process, or manipulate, the XML file we’ve just loaded.

Now, it would be better to create a different function to load the XML file:

var xmlDoc;
function importXML(file) {
 xmlDoc=document.implementation.createDocument("", "doc", null)
 xmlDoc.load(file);
 xmlDoc.onload = readXML;
}

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);

Access Tag Attributes

Storing information in XML files in the form of attributes is very common. Consequently, it is important that we are able to access attributes in XML files. In our example XML file, we have stored various employee details, including id, sex, and age, in the <employee> tag. To extract the age of the first employee, we could use the following code:

document.write(employees[0].getAttribute("age"));

The above code will output 20. The code used the getAttribute() method on the employees[0] object. Alternatively, we could use the following code to obtain the same result:

document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0]  
.getAttribute("age"));

Now, suppose you want to display the details of all employees (id, sex, age) in a tabular form. To do this, we must loop through all the <employee> tags. Following is the entire code to do this (excluding the code that loads the file):

var companies=xmlDoc.getElementsByTagName("company");  
var employees=companies[0].getElementsByTagName("employee");  
document.write('<table border="1">');  
document.write('<tr><th>id</th><th>Sex</th><th>Age</th></tr>');  
for(var i=0; i<employees.length; i++) {  
 document.write('<tr>');  
 document.write('<td>' + employees[i].getAttribute("id") + '</td>');  
 document.write('<td>' + employees[i].getAttribute("sex") + '</td>');  
 document.write('<td>' + employees[i].getAttribute("age") + '</td>');  
 document.write('</tr>');  
}  
document.write('<table>');

The output of the above code in Mozilla looks like this:

Is it Possible to Write to an XML File?

No, it’s not possible to write to an XML file using client-side JavaScript. You can manipulate all the contents of an external XML file and use it for display purposes in your client-side JavaScript application, but it is not possible, for instance, to take input from the user, and make changes to the XML file using JavaScript.

Conclusion

We now know how to test for Mozilla, load an XML document using JavaScript, and manipulate the contents of an XML file using JavaScript in Mozilla. Using XML and client-side JavaScript, several simple applications can be created:

• you could use XML files to store small databases, then use JavaScript to display the data according to your needs
• you could create something like a news “ticker”, where you store the news items in a XML file and your JavaScript reads the contents of the file and ticks the news items on the screen

These are just a few examples where XML and client-side JavaScript could be used. I hope this article has given you an introductory idea of using XML and client-side JavaScript in Mozilla.

[1] http://www.sitepoint.com/article/989