Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

XML DOM


DOM is an acronym stands for Document Object Model. It defines a standard way to access and manipulate documents. The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

As a W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications. The Document Object Model can be used with any programming language.

XML DOM defines a standard way to access and manipulate XML documents.


What does XML DOM

The XML DOM makes a tree-structure view for an XML document.

We can access all elements through the DOM tree.

We can modify or delete their content and also create new elements. The elements, their content (text and attributes) are all known as nodes.

For example, consider this table, taken from an HTML document:

  1. <TABLE>
  2. <ROWS>
  3. <TR>
  4. <TD>A</TD>
  5. <TD>B</TD>
  6. </TR>
  7. <TR>
  8. <TD>C</TD>
  9. <TD>D</TD>
  10. </TR>
  11. </ROWS>
  12. </TABLE>

The Document Object Model represents this table like this:

xml-dom

XML DOM Example : Load XML File

Let’s take an example to show how an XML document (“note.xml”) is parsed into an XML DOM object.

This example parses an XML document (note.xml) into an XML DOM object and extracts information from it with JavaScript.

Let’s see the XML file that contains message.

note.xml

  1. <?xml version=“1.0” encoding=“ISO-8859-1”?>
  2. <note>
  3.   <to>sonoojaiswal@Kreationnext.com</to>
  4.   <from>vimal@Kreationnext.com</from>
  5.   <body>Hello XML DOM</body>
  6. </note>

Let’s see the HTML file that extracts the data of XML document using DOM.

xmldom.html

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Important Note</h1>
  5. <div>
  6. <b>To:</b> <span id=“to”></span><br>
  7. <b>From:</b> <span id=“from”></span><br>
  8. <b>Message:</b> <span id=“message”></span>
  9. </div>
  10. <script>
  11. if (window.XMLHttpRequest)
  12.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  13.   xmlhttp=new XMLHttpRequest();
  14.   }
  15. else
  16.   {// code for IE6, IE5
  17.   xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
  18.   }
  19. xmlhttp.open(“GET”,”note.xml”,false);
  20. xmlhttp.send();
  21. xmlDoc=xmlhttp.responseXML;
  22. document.getElementById(“to”).innerHTML=
  23. xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue;
  24. document.getElementById(“from”).innerHTML=
  25. xmlDoc.getElementsByTagName(“from”)[0].childNodes[0].nodeValue;
  26. document.getElementById(“message”).innerHTML=
  27. xmlDoc.getElementsByTagName(“body”)[0].childNodes[0].nodeValue;
  28. </script>
  29. </body>
  30. </html>

Test it Now

Output:

Important Note

To: sonoojaiswal@Kreationnext.com
From: vimal@Kreationnext.com
Message: Hello XML DOM

XML DOM Example : Load XML String

This example parses an XML string into an XM DOM object and then extracts some information from it with a JavaScript.

Let’s see the HTML file that extracts the data of XML string using DOM.

xmldom.html

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Important Note2</h1>
  5. <div>
  6. <b>To:</b> <span id=“to”></span><br>
  7. <b>From:</b> <span id=“from”></span><br>
  8. <b>Message:</b> <span id=“message”></span>
  9. </div>
  10. <script>
  11. txt1=“<note>”;
  12. txt2=“<to>Sania Mirza</to>”;
  13. txt3=“<from>Serena William</from>”;
  14. txt4=“<body>Don’t forget me this weekend!</body>”;
  15. txt5=“</note>”;
  16. txt=txt1+txt2+txt3+txt4+txt5;
  17. if (window.DOMParser)
  18.   {
  19.   parser=new DOMParser();
  20.   xmlDoc=parser.parseFromString(txt,”text/xml”);
  21.   }
  22. else // Internet Explorer
  23.   {
  24.   xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
  25.   xmlDoc.async=false;
  26.   xmlDoc.loadXML(txt);
  27.   }
  28. document.getElementById(“to”).innerHTML=
  29. xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue;
  30. document.getElementById(“from”).innerHTML=
  31. xmlDoc.getElementsByTagName(“from”)[0].childNodes[0].nodeValue;
  32. document.getElementById(“message”).innerHTML=
  33. xmlDoc.getElementsByTagName(“body”)[0].childNodes[0].nodeValue;
  34. </script>
  35. </body>
  36. </html>

Test it Now

Output:

Important Note2

To: Sania Mirza
From: Serena William
Message: Don’t forget me this weekend!

Comments

comments