Search Topic Here

Sunday, 29 June 2014

Html Dom



Every one confusing regarding HTML DOM(Document object Model).There no confusion HTML DOM meansimagining html document with  a  tree Structure with Parent and Child relationship.every one  knows that html is tag based and it  allows tags inside tags .

Ex:

<p>
    <b> Hello</b>
</p>

Here the bold tag <b> is inside para tag<p>
Now coming to the topic HTML DOM is introduced to change the properties of all the HTML elements dynamically by using java script.

The following Structue shows  basic HTML DOM:





Example Structure with table tag






here i will give a basic example for  changing visibility and hidden properties dynamically.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<script>
function hidevisible(x)
{
if(x==1)
{
document.getElementById('text').style.visibility="hidden";
}

if(x==2)
{
document.getElementById('text').style.visibility="visible";
}
}

</script>
 </HEAD>

 <BODY>
 <p id="text">Hello How are u </p>
 <button onclick="hidevisible('1')">HIDE</button> <button onclick="hidevisible('2')" >visible</button>


 </BODY>
</HTML>

OUTPUT:
New Document
Hello How are u



No comments:

Post a Comment