DHtml Document Object Model | DOM Embed with the Html file with Node, sibling node, parent node

Start the program. DOM refers to DOCUMENT OBJECT MODEL. It is hierarchical tree structure .Each tag name represent as node. A node contain node is called parent node. Node that peers like first name and last name are called sibling nodes. These DOM embedded with Html when onclick event occur it call parseit function. These parsait it load the xml DOM.
Source in HTML programming
<html>
<body>
<input type="button" onclick="parseit()" value=" Parse and show ">
<div id="d1"> </div>
<script language="javascript">
var xmlDoc;
var temp="";
function loadit() {
try {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{ alert(e); }
}

function parseit() {
loadit();
try {
xmlDoc.async=false;
xmlDoc.load("catalog.xml");
x=xmlDoc.getElementsByTagName("staff");
temp="<table border=1><tr><th> ID <th> Name <th> Age <th> City </tr>";
for(var i=0;i<x.length;i++) {
temp= temp +"<tr><td>"+ x.item(i).attributes.getNamedItem("id").value;
for(var j=0;j<x[i].childNodes.length;j++) {
xn = x[i].childNodes[j] ;
temp = temp + "<td>" + xn.childNodes[0].nodeValue;
}
temp = temp + "</tr>";
}
}
catch(e) { alert(e.message) }
d1.innerHTML = temp;
}
</script>
</body>
</html>

Save this file as catalog.xml
<?xml version="1.0"?>
<staffs>
<staff id="111">
<name> S.Santhaguru </name>
<age> 21 </age>
<city>cuddalore </city>
</staff>
<staff id="112">
<name>Subbu</name>
<age> 21 </age>
<city> Madurai </city>
</staff>
<staff id="113">
<name> saravanan </name>
<age> 22 </age>
<city> Trichy</city>
</staff>
<staff id="114">
<name> Nelson </name>
<age> 21 </age>
<city> Dindingul </city>
</staff>
<staff id="115">
<name>Kannan</name>
<age> 22 </age>
<city> Karaikudi </city>
</staff>
<staff id="116">
<name> Nagarajan</name>
<age> 22 </age>
<city> Chennai</city>
</staff>
</staffs>



Screen shot Dhtml programming Output
DOM parent node sibling function Dhtml

Related post