How to Retrieve Nodes From XML in JavaScript

XML processing in JavaScript is common and typically simple.

Parsing XML data is generally straightforward in JavaScript. JavaScript functions run within the Web browser, with the ability to process XML provided by the browser program itself. To acquire this ability within your code, you need to provide slightly differing syntax excerpts for different browsers, but once you have, the process of retrieving nodes is the same for any browser. JavaScript DOM programming allows you to retrieve nodes and traverse XML tree structures including finding child nodes and node content.

Instructions

1. Create your JavaScript file or Web page section. If your JavaScript is going to run in a dedicated file, create a new one in a text editor and save it with the ".JS" extension. If it is running within a Web page, create a section for it as follows:

   <script type="text/javascript">

   //code here

   </script>

   You can include any JavaScript code within the dedicated area or file. You may wish to include your processing within a function using the following outline:

   function processXMLData(){

   //processing here

   }

2. Prepare your script to acquire the XML data. Within your JavaScript section, whether it is in a separate file or an HTML page, add the following code, creating an "XMLHttpRequest" object:

   var xmlHttpReq;

   if (window.XMLHttpRequest) {

   xmlHttpReq=new XMLHttpRequest(); }

   else {

   xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); }

   This sets your code up to cater to different browser versions. When this code executes, your script has an object it can use to acquire the XML data across the Internet.

3. Import the XML data into your script. Using the following code, acquire the XML data from a specified location, reading it into a variable:

   xmlHttpReq.open("GET","datafile.xml",false);

   xmlHttpReq.send();

   var xmlDocument=xmlHttpReq.responseXML;

   Alter the second parameter to the "open" function to reflect the name and location of the XML data file you plan on reading. This code uses the "xmlHttpReq" object to retrieve the data across the network, reading the content into the "xmlDocument" variable.

4. Parse your XML data. Using the following code, retrieve the nodes in your XML data which have a specified tag name, "thing" in this case:

   var nodes = xmlDocument.getElementsByTagName("thing");

   Alter the code to reflect the tag name of the nodes you are trying to retrieve. This reads all nodes in the XML document with the specified tag name into an array variable. You can access the first element as follows:

   var firstNode = nodes[0];

5. Process the content of your XML nodes. Rather than simply retrieving entire nodes from your XML data, you are likely to need to process additional details, such as their child nodes and node values. The following syntax demonstrates acquiring the child nodes of the first node in the array:

   var childNodes = firstNode.childNodes;

   This variable will also contain an array of all children of the first node. To access the actual content, you need to retrieve the node value, for example, for the first child node in the array:

   var nodeContent = chlidNodes[0].nodeValue;

Tips & Warnings

• Use loops in your code if you need to process all nodes or child nodes within your XML data.

• If you are unfamiliar with the structure of the XML data you are trying to parse, a period of trial and error may be necessary.

References

• W3Schools: JavaScript Functions
• W3Schools: The XMLHttpRequest Object
• W3Schools: XML Parser
• W3Schools: XML DOM

Resources

• W3Schools: XML DOM Parser
• W3Schools: XML DOM Traverse Node Tree
• W3Schools: XML DOM Node Information
• W3Schools: XML DOM Node List