Access child Elements - Part 2

Accessing child elements can be done in many ways. We already discussed about getElementsByTagName. Now i worked and refined another script by using childNodes. Below is the script:

<script type="text/javascript"> 
rootelement = document.getElementById("ulparent");
for (i=0; i < rootelement.childNodes.length; i++) 
{
node = rootelement.childNodes[i];
if (node.nodeName=="LI") 
{
node.onmouseover=function() {
this.className+="over"; 
}
node.onmouseout=function() { 
this.className=this.className.replace("over", ""); 
}
}  
}
</script>

In above script we're going to add over class to the list elements when we mouse over on that. Initially we'll get total child nodes by describing rootelement.childNodes[i]. The condition node.nodeName =="li" enables the mouseover and mouseout event. In both events we are adding and removing class names correspondingly.