Document Object Model examples

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).

If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

Code Source

Good to navigate between parent and child within an html page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>DOM example</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">

/*focus on the appendChild, nodeName, nodeType, childNodes and nodeValue functions and learn that we can get the child out of the parent and retrieve the parent from the child...*/
function insert1()
{
	var	folder=document.getElementById('fold1part');
	var	fchild=document.getElementById('link1');

	folder.appendChild(fchild);
}

function insert2()
{
	var	folder=document.getElementById('fold2part');
	var	fchild=document.getElementById('link1');

	folder.appendChild(fchild);
}

function insert3()
{
	var	folder=document.getElementById('fold3part');
	var	fchild=document.getElementById('link1');

	folder.appendChild(fchild);
}

function display()
{
	var	action=document.getElementById('action');
	var	folder=document.getElementById('fold2part').childNodes;
	action.innerHTML="";
	var i=0;

	for (i=0;i < folder.length;i++)
	{
	
		//if the node type is text, do not display as there is not child (http://developer.mozilla.org/en/docs/DOM:element.nodeType)
		if(folder[i].nodeType != 3)
		action.innerHTML+=folder[i].nodeName  + ' (' + folder[i].childNodes[0].nodeValue + ')\n';
	
	}

}


function chgparent()
{
	//we change the color of the whole parent box
	var	folder=document.getElementById('link1').parentNode;
	folder.style.color = 'red';			
}

</script>

<style type="text/css">
#fold1part{background-color:lightgray;}
#fold2part{background-color:yellow;}
div{margin-bottom:30px}
#link1{background-color:cyan}
</style>
</head>
<body>
<h1>Document Object Model - Simple Examples</h1>

<p>There are 3 div boxes including links except one which is empty (the third one), the functions will act on the link number one...</p>

<div id="fold1part">
<span id="link1">Link 1</span>
<span id="link2">Link 2</span>

<span id="link3">Link 3</span>
</div>


<div id="fold2part">
<span id="link4">Link 4</span>

<span id="link5">Link 5</span>
<span id="link6">Link 6</span>
</div>

<div id="fold3part">
</div>

<p>Just click the following buttons to see their function:</p>

<input type="button" onclick="javascript:insert1();" value="Insert in 1" /><br />

<input type="button" onclick="javascript:insert2();" value="Insert in 2" /><br />
<input type="button" onclick="javascript:insert3();" value="Insert in 3" /><br />

<p>
<input type="button" onclick="javascript:display();" value="Display" /><br />
<input type="button" onclick="javascript:chgparent();" value="Change Parent Color" /><br />

</p>

<div id="action"></div>
</body>
</html>

download the file

These manipulations introduce the document hierarchy with few useful functions you can retrieve and use for different effects.
You can find additional information onto http://msdn.microsoft.com/.../domoverview.asp and http://www.mozilla.org/docs/dom/

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Mass Article Control #1
Create Thousands Of Articles From only 1 Article and Have them Submitted Automatically With A brand New Submitter!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

Document Object Model examples

Document Object Model examples

Webmaster Corner

Categories