How to read DOM in XML

In this article I am going to explain about to XML DOM.
  • 1679

Definition

The Document Object Model (DOM) is a language-independent and cross-platform convention for interacting and representing with objects in XHTML, HTML and XML documents. The DOM is a programming interface for XML and HTML documents. It defines the way a document can be manipulated and accessed .The DOM allows you to programmatically navigate the tree and add, delete and change any of its elements.

Lets take an example of XML

Load an XML File - Cross-browser Example

<html>
<body>
    <h1>
        DOT NET HEAVEN</h1>
    <div>
        <b>From:</b> <span id="from"></span>
        <br />
        <b>To:</b> <span id="to"></span>
        <br />
        <b>SMS:</b> <span id="sms"></span>
    </div>
    <script type="text/javascript">
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "note.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
 
        document.getElementById("from").innerHTML =
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
        document.getElementById("to").innerHTML =
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
        document.getElementById("sms").innerHTML =
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
    </script>
</body>
</html>
 

 

In this example XML documents ("note.XML") into an XML DOM object and then extracts some info from
it with a JavaScript:


Output

  Clipboard01.jpg

Load an XML String - Cross-browser Example

<html>
<body>
    <h1>
        DOT NET HEAVEN</h1>
    <div>
        <b>To:</b> <span id="to"></span>
        <br />
        <b>From:</b> <span id="from"></span>
        <br />
        <b>Message:</b> <span id="message"></span>
    </div>
    <script type="text/javascript">
        txt = "<note>";
        txt = txt + "<to>Tove</to>";
        txt = txt + "<from>Jani</from>";
        txt = txt + "<heading>Reminder</heading>";
        txt = txt + "<body>please contact to me</body>";
        txt = txt + "</note>";
 
        if (window.DOMParser) {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(txt, "text/xml");
        }
        else // Internet Explorer
        {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(txt);
        }
 
        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>
</body>
</html>
 

In this example parses an XML string into an XML DOM object and then extracts some info from it with a JavaScript:

output


 Clipboard02.jpg

Further Readings

You may also want to read these related articles

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2013 dotNetheaven. All rights reserved.