Read / Access XML Data With DOM: XML & Javascript

Video tutorial illustrating the manipulation of XML data using DOM [ Document Object Model ]

Using CSS Level 2, we couldn’t change the order in which we would display / access the XML data. To solve that and many more limitations, we make use of DOM.
In this tutorial you can learn, accessing the required XML content and arrange it as you need it.

Business card Content
index.html

 
 
  
 
 
 
 
 

 

  
    Satish B
    (91) 9844552841
    (91) 9844119841
    satish@technotip.org
    Technotip IT Solutions
  

  
    Shwetha
    (91) 123456789
    (91) 987654321
    shwetha@microsoft.com
    Microsoft
  
   


 
 
 
 Satish: Technotip IT Solutions

 Shwetha: Microsoft
 
 

Here we’ve written entire thing in one file, for the purpose of demonstration.
We would highly recommend you to write javascript, css in external file and link it to the html file.

Video Tutorial: Read / Access XML Data With DOM: XML & Javascript

First we fetch the root tag and assign it to a javascript variable called base. Using this as a reference, we fetch the sub-element and using which we fetch all its child elements and inturn get the data present inside them.

Remember, the string inside the tags Name, phone email and company is also considered separate node.

Inside the index.html file we have taken two anchor tags:
Satish: Technotip IT Solutions
Shwetha: Microsoft

which invoke the javascript functions and then display the information of respective people.

If in case we have hundreds or thousands of people in our XML file, we could use looping and dynamically fetch XML data and display it more meaningfully and with less effort(due to proper programmatical automation).