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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <html>
<head><title>Our Business Card!</title>
<script language="javascript" type="text/javascript">
function display1() {
var base = document.getElementById("myBiz");
var person1 = base.getElementsByTagName("companyName")[0];
var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
var company;
comanyy = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
alert("Business Card: \n\n" + name + "\n" + phone1 + "\n"
+ phone2 + "\n" + email + "\n" + company);
}
function display2() {
var base = document.getElementById("myBiz");
var person2 = base.getElementsByTagName("companyName")[1];
var name = "Name: " + person2.getElementsByTagName("Name")[0].firstChild.data;
var phLable1 = person2.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
var phone1 = phLable1 + person2.getElementsByTagName("phone")[0].firstChild.data;
var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
var phone2 = phLable2 + person2.getElementsByTagName("phone")[1].firstChild.data;
var email = "email: " + person2.getElementsByTagName("email")[0].firstChild.data;
var company;
comapany = "Company: " + person2.getElementsByTagName("company")[0].firstChild.data;
alert("Business Card: \n\n" + name + "\n" + phone1 + "\n"
+ phone2 + "\n" + email + "\n" + company);
}
</script>
</head>
<body>
<xml id="myBiz" style="display: none;">
<companynames>
<companyname>
<name>Satish B</name>
<phone type="home" primary="call me">(91) 9844552841</phone>
<phone type="work">(91) 9844119841</phone>
<email>[email protected]</email>
<company>Technotip IT Solutions</company>
</companyname>
<companyname>
<name>Shwetha</name>
<phone type="home">(91) 123456789</phone>
<phone type="work" primary="call me">(91) 987654321</phone>
<email>[email protected]</email>
<company>Microsoft</company>
</companyname>
</companynames>
</xml>
<a href="javascript:display1()">Satish: Technotip IT Solutions</a><br />
<a href="javascript:display2()">Shwetha: Microsoft</a>
</body>
</html> |
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
[youtube https://www.youtube.com/watch?v=pJiJWWKEbU0]
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).