To read and update, manipulate and create an XML document,
you will need an XML parser.
A D V E R T I S E M E N T
Parsing the XML DOM
To manipulate XML document, you need XML parser. The
parser load the document into your computer's memory. Once the
document is loaded, its data can be manipulated using DOM.
The DOM treats the XML document as tree.
There are some
difference between Microsoft's XML parser and the XML parser
used in Mozilla browsers. In this tutorial we will show you how
to create cross browser script that will work in both Internet
Explorer and Mozilla browsers.
Microsoft's XML Parser
Microsoft's XML parser is a COM component that come with
Internet Explorer 5 and higher. Once you have installed Internet
Explorer, the parser is available to the scripts.
Microsoft's XML
parser support all the necessary functions to traverse the node
tree, access the nodes and their attribute values, insert and
delete nodes, and convert the node tree back to XML.
To create an instance of Microsoft's XML parser,you can use the
following code:
JavaScript:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
VBScript:
set xmlDoc=CreateObject("Microsoft.XMLDOM")
ASP:
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
The following code fragment load an existing XML document ("note.xml")
into Microsoft's XML parser:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");
The first line of the scripts above create an instance of
the XML parser. The second line turns off asynchronized loading,
to make sure that the parser will not continue execution of
scripts before the document is fully loaded. The third line tells
the parser to load XML document called "note.xml".
XML Parser in Mozilla,Opera and Firefox
Mozilla's XML parser support all the necessary functions to
traverse the node tree, access the nodes and their attribute
values, insert and delete nodes, and convert the node tree back
to XML.
To create an instance of the XML parser in Mozilla browsers,
you can use the following code:
JavaScript:
var xmlDoc=document.implementation.createDocument("ns","root",null);
The first parameter, ns, define the namespace used
for the XML document. The second parameter, root, is the
XML root element in XML file. The third parameter, null, is
always null because it is not at all implemented yet.
The following
code fragment load an existing XML document ("note.xml") into
Mozillas' XML parser:
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
The first line of the script above create an instance of the XML parser.
The second line tells the parser to load XML document called "note.xml".
Parsing an XML File - A Cross browser Example
The following example is a cross browser example that load an existing
XML document ("note.xml") into the XML parser:
<html>
<head>
<script type="text/javascript">
var xmlDoc;
function loadXML()
{
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("note.xml");
getmessage();
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
xmlDoc.onload=getmessage;
}
else
{
alert('Your browser cannot handle this script');
}
}
function getmessage()
{
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="loadXML()">
<h1>Academictutorials Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</p>
</body>
</html>
Output:
Academictutorials Internal Note
To: Tove
From: Jani
Message: Don't forget me this weekend!
Important Note
To extract the text (Jani) from the XML element like: <from>Jani</from>, the correct syntax is:
IMPORTANT: getElementsByTagName always returns an array of nodes.
The array contains all elements with the specified name within the XML documents.
In this case there is only one "from" element, but you have to still specify the array index ( [0] ).
Parsing an XML String - A Cross browser Example
The following code is a cross-browser example on how to parse and load an XML string:
<html>
<body>
<script type="text/javascript">
var text="<note>";
text=text+"<to>Tove</to>" ;
text=text+"<from>Jani</from>";
text=text+"<heading>Reminder</heading>";
text=text+"<body>Don't forget me this weekend!</body>";
text=text+"</note>";
// code for IE
if (window.ActiveXObject)
{
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(text);
}
// code for Mozilla, Firefox, Opera, etc.
else
{
var parser=new DOMParser();
var doc=parser.parseFromString(text,"text/xml");
}
// documentElement always represents the root node
var x=doc.documentElement;
document.write("Text of first child element: ");
document.write(x.childNodes[0].childNodes[0].nodeValue);
document.write("<br />");
document.write("Text of second child element: ");
document.write(x.childNodes[1].childNodes[0].nodeValue);
</script>
</body>
</html>
Output:
Text of first child element: Tove
Text of second child element: Jani
