Parsing XML Documents in JavaScript


Today XML has become the backbone of many Web Applications and like Server Side Programming language extensively supporting XML. JavaScript also supports parsing xml files at client end. The only thing the JavaScript programmers would love is to write xml files in JavaScript. In the tutorial we will understand how we will parse an xml file in JavaScript.

This Tutorial is divided into 3 different section.

  • What is XML Document?
  • XML Parsers in JavaScript
  • Properties of XML Parsers in JavaScript

What is XML Document?
XML stands for Extensible Markup Language. It is classified as an extensible language because it allows its users to define their own tags. The primary purpose of this document is the sharing of structured data across different information systems, particularly via the Internet.

But Unfortunately when you see HTML files and XML files you will find some similarity but there exists an difference between HTML and XML Document.
1. XML was designed to describe the data and to focus on what data is.
2. HTML was designed to display data and to focus on how data will look.

Rules for XML Document:

  • Start tag should have a End tag
  • Empty element may be marked with an self-closing tag such as . This is equal to
  • All attributes values are quoted with either single quote(‘) or double quotes(”)
  • Tags may be nested but must not overlap
  • Element tag name are case-sensitive. Example: <step></step> must be avoided
  • Example of XML Document:

    XML Parsers in JavaScript
    To manipulate an XML document in javascript, you need an XML parser. Today all browsers come with in-built parsers that can parse the XML document. The parser loads the document into your computer’s memory. Once the document is loaded, its data can be manipulated using the DOM(Document Object Model). There is significant differences in implementation of Microsoft Browser based XML parser and the Mozilla browsers based XML parser.

    XML Parser in Microsoft Browser:
    Microsoft’s XML parser is a COM component that comes with Internet Explorer 5 and higher. To load the XML Parser in JavaScript will have to follow series of steps.

    1. Create instance of XML Parser:

    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. Synchronous load the XML Data

    This line turns off asynchronous loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.

    3. Callback function

    Calls the callback function on change of every state while loading the xml document.

    ReadyStates in Microsoft Browsers

    1 Loading Preparing to read the XML file. Did not try yet
    2 Loaded Parsing the XML file. Object model still not available
    3 Interactive Part of XML file successfully parsed and read in. Object model partially available for read only
    4 Completed Loading of the XML file has been completed, successfully or unsuccessfully

    4. Load XML Document

    Tells the parser to load note.xml file.

    XML Parser in Firefox/Opera Browsers:
    Similar to Microsoft IE, Mozilla Firefox and Opera browsers too 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

    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. Load XML Document

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

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


    Properties of XML Parsers in JavaScript:

    The XML Object comes with inbuilt properties that allows easy iterate to the XML document. To easily understand these properties i am going to refer to the below XML file and the code for loading the XML file is also written below.

    Employee.xml

    Javascript Code Snippet for loading employee.xml(Microsoft Browsers)

    Note:
    XML Object properties are case-sensitive.

    The various properties of XML Parsers are:
    documentElement
    documentElement property will always point to the root element of the xml document.
    Syntax:
    xml_object.documentElement
    Referring to the above code Line 20 will point to company tag and tagName will return company.

    childNodes
    childNodes property will always hold array of children nodes from the current pointing node.
    Syntax:
    xml_object.current_pointing_node.childNodes[Array Index]

    firstChild
    This property will point to the first occurance of the child node found from the current pointing node. IE Specific
    Syntax:
    xml_object.firstChild
    Referring to the above code Line 24 will point to year tag and tagName will return year.

    lastChild
    Will point to the last occurance of the child node found from the current pointing node. IE Specific
    Syntax:
    xml_object.lastChild
    Referring to the above code Line 28 will point to average tag and tagName will return average.

    attributes
    Allows you to access the attributes values for the elements. This proerty is used along with the nodeValue property.
    Syntax:
    xml_object.current_pointing_node.attributes[Attribute Name/Array Index]
    Referring to the above code Line 33 and 34 will point to employee tag and will return the value assigned to id Attribute.

    nodeValue
    Return you the values assigned to the attributes. This properties is only used to extract the attribute content.
    Syntax:
    xmlDoc.current_pointing_node.attributes[Attribute Name/Array Index].nodeValue
    Referring to the above code Line 33 and 34 will point to employee tag and will return the value assigned to id Attribute.

    getElementsByTagName
    This properties allows you to point to any tag name provided you have to specify that tag name as a parameter. So it is mandatory to know the xml structure to use this property. It always returns an array of nodes.
    Syntax:
    xml_object.getElementsByTag(Tag Name)
    Referring to the above code Line 39 will point to year tag and will return the value assign to id attribute for the first year tag only.

    text
    Returns the text content assigned to the tag elements. This property cannot be used for reading attribute content. Also this property can only be used for Microsoft Browsers
    Syntax:
    xml_object.current_pointing_node.text
    Referring to the above code Line 43 will point to employee tag and will return John.

    textContent
    Returns the text content assigned to the tag elements. This property cannot be used for reading attribute content. Also this property can only be used for Mozilla, Firefox, Opera Browsers
    Syntax:
    xml_object.current_pointing_node.textContent

    hasChildNodes
    Return boolean value indicating the current pointing node has child nodes or not.
    Syntax:
    xml_object.hasChildNodes
    Referring to the above code Line 47 will return True as the company tag has childnodes.

    tagName
    Return you the element name
    Syntax:
    xml_object.current_pointing_node.tagName
    Referring to the above code Line 20 it points to company tag and return the company.

    Important Note on Cross Browser XML Scripting:
    To implement cross-browser functionality childNodes properties plays an important role.

Tagged , . Bookmark the permalink.

33 Responses to Parsing XML Documents in JavaScript

  1. luis9811 says:

    it’s a great script, thanks, and have a nice day…

  2. Pingback: Associative Property

  3. Can you tell me where you are finding it difficult to understand.

    Hitesh A

  4. I found your site on faves.com bookmarking site.. I like it ..gave it a fave for you..ill be checking back later

  5. Rob Barnett says:

    Dudes, you guys saved my bacon on an Expedia micro site. Could not render a XML pull in FF. Never happened before. Used textContent for FF and it worked perfectly.

    Thanks

  6. Kane says:

    May be need more controller on this XMLdom on create a new pages

  7. Robo says:

    nice script, but will it works in other browsers?, as you are using Microsoft object (Microsoft.XMLDOM)

  8. I explained a new jQuery Plugin called jParse. It is an easy to use jQuery Plugin for parsing XML with Javascript – More details can be found at: http://www.bloggingdeveloper.com/post/Parse-XML-with-Javascript-jParse-jQuery-Plugin-for-Parsing-XML.aspx

  9. Pingback: Twitted by deliciobot

  10. Rahul Anand says:

    Not working brother. it is returning the xmlDoc.readystate=undefined. please check it

  11. Anirban Chowdhury says:

    Excellent one. You can probably change this comment
    //Using lastChild Properties
    //Output average
    This would also clearly print out year.
    Thanks a lot.

  12. Supriya says:

    Thanks ,your given example worked for my requirement

  13. Dhirendra Singh says:

    Hey its being a nice code for parsing the XML..but i have come across an issues where XML file is coming from some source and it has 2 blank lines at top..so i m getting the below error in FF…

    Error: XML or text declaration not at start of entity
    Source File: https:///docPreview.wss?uid=V285178T27303S25&styleID=N696394B26814Z26
    Line: 3, Column: 1
    Source Code:

  14. bunny says:

    how can i use javascript to write some content from a text box or dropdown menu to an xml file?

  15. This is a very good tutorial on parsing XML with JavaScript.

    Is there any way to parse XML file without using browser’s built-in object?

  16. tester says:

    Hello. I have saved above files and it does not work for me. Does not give nay output.

    Can someone help me?

  17. rawr says:

    @tester

    I believe line 49 is missing a } to close off the function readXML ()

  18. Info says:

    hi,

    when i give
    var txt=xmlDoc.documentElement.childNodes;
    alert(txt.length);

    the output is 5.it must be 2 right.why is this so.

  19. Walimay says:

    Hi,
    I’m trying a siple xml read.

    The code stops but I can’t understand why.
    Can anyone help me ?

    Thanks

    here is my code…

    Test JavaScript XML

    <!–
    document.write("Script start…”);

    // firefox / Opera
    var objXmlDom=document.implementation.createDocument(“”,””,null);

    // IE
    // var objXmlDom = new ActiveXObject(“Microsoft.XMLDOM”);

    objXmlDom.async = false;
    objXmlDom.onreadystatechange = readXML();
    document.write(“Open file…”);
    objXmlDom.load(“dati.xml”);

    function readXML()
    {
    document.write(“readystate: ” + objXmlDom.readyState + “”);
    if(xmlDoc.readyState == 4)
    {
    document.write(“File opened…”);
    var nome = objXmlDom.getElementsByTagName(“item/name”);
    var posx = objXmlDom.getElementsByTagName(“item/posx”);
    var posy = objXmlDom.getElementsByTagName(“item/posy”);

    document.write(“elements loop…”);
    var i = 0;

    for (i=0; i<nome.length; i++)
    {
    document.write(nome[i].text + " | " + posx[i].text + " | " + posx[i].text + "”);
    }

    objXmlDom.Close();
    }
    else
    {
    document.write(“loading…”);
    }
    return;
    }

    document.write(“Sscript End…”);

    –>

  20. Josh says:

    When I use the Firefox code, FF blocks my request because the XML is on a different domain. How can I fix this?

  21. Ramzi Komati says:

    To return the employee name “John” correctly:

    var xmltext = xmlhttp.responseXML.getElementsByTagName(“company”);
    alert(getNodeValue(xmltext[0], “employee”));
    function getNodeValue(obj, tag) {
    return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
    }

  22. Amit says:

    Very well writtern!!
    Thanks Dude!!

  23. Prakash says:

    Hi Hitesh, Very good article. Thanks.

  24. Ibnu says:

    Finally, I found the good tutorial. thank you very very very much. I love this

  25. Dharmender Kumar says:

    I have written in a js file :

    var xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
    xmlDoc.async=”false”;
    xmlDoc.load(“..\XML\xmlfile.xml”); //This path is relative path to the html or js file.

    BUt what if I give some local path. For example say

    xmlDoc.load(“D:NewFolderXMLxmlfile.xml”); //This gives a error as “Access denied” when I debugg it.
    Can anyone please suggest me how to load the xml from my local path instead of relative path. Waiting for responses.

    • Hi Dharmender,
      It is not possible to load local file inside JavaScript. It is against the security policy and i think Firefox gives some API to access local data but you can check that out. The code u are providing is for IE and not Firefox.

      In the end it is dependent on browser to allow.

      Hope this helps.

      Thanks,
      Hitesh A

  26. adnan says:

    I tried to work this for a couple hours. But it doesnt work.

  27. yashwanth says:

    can we use this code in aptana tool.its displaying nothing in browser after running

  28. RaviShankar says:

    Excellent information. It was very specific and clear.

  29. SoftXPath is small cross browser JavaScript library written for web developers who deals with XML parsing/querying on client side. With the help of SoftXPath you will be able to query complex XML documents using powerful Xpath expressions.

  30. Pingback: Day 10 of 18 x 10: Live traffic updates from home to Half Moon Bay with D3js | Data Wandering: 180 Visualizations w/ D3js in 180 Days

Leave a Reply