HOME

XML DOM Tutorial
DOM HOME
DOM Introduction
DOM Nodes
DOM Node Tree
DOM Node Access
DOM Node Info
DOM Node List
DOM Parsing
DOM Traverse Nodes
DOM Mozilla vs IE
DOM Navigate Nodes

Manipulate Nodes
DOM Get Nodes
DOM Set Nodes
DOM Remove Nodes
DOM Replace Nodes
DOM Create Nodes
DOM Add Nodes
DOM Clone Nodes

XML DOM Reference
DOM Node Types
DOM Node
DOM NodeList
DOM NamedNodeMap
DOM Document
DOM DocumentImpl
DOM DocumentType
DOM ProcessingInstr
DOM Element
DOM Attribute
DOM Text
DOM CDATA
DOM Comment
DOM HttpRequest
DOM ParseError

DOM Summary

Examples
DOM Examples
DOM Validator

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Forum

Helping W3Schools

Parsing the XML DOM

To read and update, create and manipulate an XML document, you will need an XML parser.

Examples

Parse an XML file - Crossbrowser example
This example is a cross-browser example that loads an existing XML document ("note.xml") into the XML parser.

Parse an XML string - Crossbrowser example
This example is a cross-browser example on how to load and parse an XML string.

Parsing the XML DOM

To manipulate an XML document, you need an XML parser. The parser loads the document into your computer's memory. Once the document is loaded, its data can be manipulated using the DOM. The DOM treats the XML document as a tree.

There are some differences 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 scripts that will work in both Internet Explorer and Mozilla browsers.

Microsoft's XML Parser

Microsoft's XML parser is a COM component that comes with Internet Explorer 5 and higher. Once you have installed Internet Explorer, the parser is available to scripts.

Microsoft's XML parser supports 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, 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 loads 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 script above creates an instance of the XML parser. The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded. The third line tells the parser to load an XML document called "note.xml".

XML Parser in Mozilla, Firefox, and Opera

Mozilla's XML parser supports 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, use the following code:

JavaScript:

var xmlDoc=document.implementation.createDocument("ns","root",null);

The first parameter, ns, defines the namespace used for the XML document. The second parameter, root, is the XML root element in the XML file. The third parameter, null, is always null because it is not implemented yet.

The following code fragment loads 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 creates an instance of the XML parser. The second line tells the parser to load an XML document called "note.xml".

Parsing an XML File - A Cross browser Example

The following example is a cross browser example that loads 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>W3Schools 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:

W3Schools Internal Note

To: Tove
From: Jani
Message: Don't forget me this weekend!

Important Note

To extract the text (Jani) from an XML element like: <from>Jani</from>, the correct syntax is:

getElementsByTagName("from")[0].childNodes[0].nodeValue

IMPORTANT: getElementsByTagName returns an array of nodes. The array contains all elements with the specified name within the XML document. In this case there is only one "from" element, but you still have to specify the array index ( [0] ).

Parsing an XML String - A Cross browser Example

The following code is a cross-browser example on how to load and parse 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

Note: Internet Explorer uses the loadXML() method to parse an XML string, while Mozilla browsers uses the DOMParser object.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

W3Schools was converted to XHTML in December 1999