On a current project I am on I made a few javascript helper functions. The first set is for traversing the node heirarchy. It just simplies the route you use to get to a sibling of the same node type, I have made its own sibling function too which gets the previous. The other two again by tag type are to get the first instance of a tag inside a container and also to get the count of how many times that tag appears inside a container.
Utils.getNextSiblingByTag(object, tagName)
Utils.getPreviousSiblingByTag(object, tagName)
Utils.getFirstChildNode(object, tagName)
Utils.getChildNodeCountByTag(object, tagName)
HtmlSelect.SetSelectedIndexByValue(obj,value, caseSensitive)
HtmlSelect.SetSelectedIndexByText(obj,value, caseSensitive)
var Utils = {
getNextSiblingByTag : function(object, tagName)
{
if(object.nextSibling == null)
{
return null;
}
else if(object.nextSibling.tagName != tagName.toUpperCase())
{
return Utils.getNextSiblingByTag(object.nextSibling,tagName.toUpperCase());
}
else
{
var o = object.nextSibling;
return o;
}
},
getPreviousSiblingByTag : function(object, tagName)
{
if(object.nextSibling == null)
{
return null;
}
else if(object.previousSibling.tagName != tagName.toUpperCase())
{
return Utils.getPreviousSiblingByTag(object.previousSibling,tagName.toUpperCase());
}
else
{
var o = object.previousSibling;
return o;
}
},
getFirstChildNode : function(object,tagName)
{
for(var i = 0; i < object.childNodes.length; i++)
{
if(object.childNodes[i].tagName == tagName.toUpperCase())
{
return object.childNodes[i];
}
}
},
getChildNodeCountByTag : function(object,tagName)
{
return object.getElementsByTagName(tagName).length;
}
};
I built another two functions and these are to work with a select box or list box. Shear timesavers and nothing else lol. Set the selected index by text or by the value. I have not given these great testing but hey ho:
var HtmlSelect = {
SetSelectedIndexByValue : function(obj,value, caseSensitive)
{
for(var i = 0; i < obj.length;i++)
{
if(caseSensitive)
{
if(obj.options[i].value == value)
{
obj.selectedIndex = i;
return;
}
}
else
{
if(obj.options[i].value.toLowerCase() == value.toLowerCase())
{
obj.selectedIndex = i;
return;
}
}
}
},
SetSelectedIndexByText : function(obj,value, caseSensitive)
{
for(var i = 0; i < obj.length;i++)
{
if(caseSensitive)
{
if(obj.options[i].text == value)
{
obj.selectedIndex = i;
return;
}
}
else
{
if(obj.options[i].text.toLowerCase() == value.toLowerCase())
{
obj.selectedIndex = i;
return;
}
}
}
}
};
FULL DEMONSTRATION CODE
The sample html page below demonstrates some of the above functions. I have just implemented my own shortcut being the $MyGet simply as an example.
<html>
<head>
<title></title>
<script type="text/javascript">
var Utils = {
getNextSiblingByTag : function(object, tagName)
{
if(object.nextSibling == null)
{
return null;
}
else if(object.nextSibling.tagName != tagName.toUpperCase())
{
return Utils.getNextSiblingByTag(object.nextSibling,tagName.toUpperCase());
}
else
{
var o = object.nextSibling;
return o;
}
},
getPreviousSiblingByTag : function(object, tagName)
{
if(object.nextSibling == null)
{
return null;
}
else if(object.previousSibling.tagName != tagName.toUpperCase())
{
return Utils.getPreviousSiblingByTag(object.previousSibling,tagName.toUpperCase());
}
else
{
var o = object.previousSibling;
return o;
}
},
getFirstChildNode : function(object,tagName)
{
for(var i = 0; i < object.childNodes.length; i++)
{
if(object.childNodes[i].tagName == tagName.toUpperCase())
{
return object.childNodes[i];
}
}
},
getChildNodeCountByTag : function(object,tagName)
{
return object.getElementsByTagName(tagName).length;
}
};
function showNextLink(obj)
{
alert(Utils.getNextSiblingByTag(obj,"A").innerHTML);
}
function showPreviousLink(obj)
{
alert(Utils.getPreviousSiblingByTag(obj,"A").innerHTML);
}
var HtmlSelect = {
SetSelectedIndexByValue : function(obj,value, caseSensitive)
{
for(var i = 0; i < obj.length;i++)
{
if(caseSensitive)
{
if(obj.options[i].value == value)
{
obj.selectedIndex = i;
return;
}
}
else
{
if(obj.options[i].value.toLowerCase() == value.toLowerCase())
{
obj.selectedIndex = i;
return;
}
}
}
},
SetSelectedIndexByText : function(obj,value, caseSensitive)
{
for(var i = 0; i < obj.length;i++)
{
if(caseSensitive)
{
if(obj.options[i].text == value)
{
obj.selectedIndex = i;
return;
}
}
else
{
if(obj.options[i].text.toLowerCase() == value.toLowerCase())
{
obj.selectedIndex = i;
return;
}
}
}
}
};
function $MyGet(obj)
{
return document.getElementById(obj);
}
</script>
</head>
<body>
<div id="tester">
<a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" mce_href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" onclick="alert(Utils.getChildNodeCountByTag(this.parentNode,'a'));">Get Link Count</a><br/>
<a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" mce_href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" onclick="showNextLink(this);">First Link</a>
<p>This is a test</p>
<a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" mce_href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" onclick="showPreviousLink(this);">Second Link</a><br/>
<a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" mce_href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" onclick="HtmlSelect.SetSelectedIndexByValue($MyGet('selectBox'),'Utah',true);">Set Utah By Value with case
sensitivity</a><br/>
<a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" mce_href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=NewPost§ionid=792#" onclick="HtmlSelect.SetSelectedIndexByText($MyGet('selectBox'),'texas',false);">Set Texas By Text without case
sensitivty</a>
<select id="selectBox">
<option value="Alabama">Alabama</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
</select>
</div>
</body>
</html>
Cheers
Andrew