Custom Search

JavaScript XML Parsing on Mozilla Firefox / Opera Browsers

Posted by Hitesh Agrawal
April 16, 2008

Today XML has become the backbone of many Web Applications. In JavaScript we can parse xml files at client end. But this parsing is different varies with browsers. In the tutorial we will understand how we can parse an xml file in JavaScript for Mozilla Firefox, Opera Browsers. If you are looking for XML parsing in Microsoft Internet Explorer Check this out JavaScript XML Parsing on Microsoft Internet Explorer

XML Parsing in Firefox/Opera Browsers:

Mozilla Firefox and Opera browsers comes with their own xml parsers. To load the XML Parser in JavaScript will have to follow series of steps:

1. Create instance of XML Parser

 
<script type="text/javascript">
 
    var xmlDoc=document.implementation.createDocument("","",null);
 
</script>

This will load the xml parser in the memory and will wait for the xml document. This component will automatically get erased when you close the browser window or the Browser. Here the xmlDoc holds the XML Object for JavaScript.

2. Loading XML Document

 
<script type="text/javascript">
 
    xmlDoc.load("note.xml");
 
</script>

This line tells the parser to load an XML document called “note.xml”.

3. Callback function

 
<script type="text/javascript">
 
    xmlDoc.onload='function-name'
 
</script>

This line tells the parser to call function when the XML document is loaded.

Reference XML File: Employee.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
< ?xml version="1.0" encoding="UTF-8"?> 
 
	<company>
 
		<employee id="001" >John</employee>
 
		<turnover>
 
			<year id="2000">100,000</year>
 
			<year id="2001">140,000</year>	
 
			<year id="2002">200,000</year>
 
		</turnover>
 
	</company>

Javascript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

 
<html>
 
 <head>
 
  <title>Read XML in Firefox/Opera Browsers</title>
 
  <script type="text/javascript">
 
    var xmlDoc;
 
    function loadxml() {
 
      xmlDoc=document.implementation.createDocument("","",null);
 
      xmlDoc.load("employee.xml");
 
      xmlDoc.onload= readXML;
 
    }
 
 
 
    function readXML() {
 
        //Using documentElement Properties
 
        //Output company
 
        alert("XML Root Tag Name: " + xmlDoc.documentElement.tagName);
 
 
 
		//Using nodeValue and Attributes Properties
 
		//Here both the statement will return you the same result
 
		//Output 001
 
		alert("Node Value: " + xmlDoc.documentElement.childNodes[1].attributes[0].nodeValue);
 
		alert("Node Value: " + xmlDoc.documentElement.childNodes[1].attributes.getNamedItem("id").nodeValue);
 
 
 
		//Using getElementByTagName Properties
 
		//Here both the statement will return you the same result
 
		//Output 2000
 
		alert("getElementsByTagName: " + xmlDoc.getElementsByTagName("year")[0].attributes.getNamedItem("id").nodeValue);
 
 
 
		//Using text Properties
 
		//Output John
 
		alert("Text Content for Employee Tag: " + xmlDoc.documentElement.childNodes[1].textContent);
 
     } 	
 
  </script>
 
 </head>
 
 
 
 <body onload="javascript:loadxml();">
 
 
 
 </body>
 
</html>

Explanation

Related Post

Javascript

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)