Forum Moderators: open
Hi
I have been working on a site where I have already created 27 pages which has navigation using the classic unordered list with list items within and anchor tag links within the list items. I have already put ID on the list items which are three per page and have much CSS associated with these IDs. So I really would not want to change where I have put the ID on my tags at this point. I have written a script which is much more complicated than the two illustrated below however to two below serves to illustrate my problem. I had vaguely remembered that the Dom for Firefox and Internet Explorer was not exactly the same. But I didn't think of this when I started my site creation. Consequently I need a way of getting a reference to my child anchor tags from my parent IDed list item tags. I know how to do this now for both Internet Explorer and Firefox but not at the same time. So my question is how do I do this? Is there one best way of getting a reference to a child tag that works both in Internet Explorer and Firefox? Is there one easiest way? Is there many ways of doing this? Please tell me what way you know of doing this. And please don't hesitate to respond to this posting if it has already been answered for I would really appreciate as many answers as I can get. Of course if there is one best and easiest way of doing this one answer would be very appreciated.
Very sincerely
Marc
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>Simple DOM Demo</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script src="DOMDemoFirefox.js" type="text/javascript">
</script>
</HEAD>
<BODY >
<ul >
<li ID="prev">
<a href="#">The is childNodes[1] in FireFox</a>
</li>
</ul>
</BODY>
</HTML>JavaScript for Firefox
function green () {
this.style.backgroundColor="green";
};
window.onload = function () {
document.getElementById("prev").childNodes[1].onclick=green;
}
function green () {
this.style.backgroundColor="green";
};
window.onload = function () {
document.getElementById("prev").childNodes[0].onclick=green;
}
<li ID="prev"><a href="#">The is childNodes[1] in FireFox</a></li>
and index of zero
document.getElementById("prev").childNodes[0].onclick=green;
else loop thru childNodes skiping text nodes
The moral of the story is that locating a child element by counting nodes alone is unreliable. Counting elements is ok.
Try something like one of these:
document.getElementById("prev").getElementsByTagName("a")[0].onclick=green;
document.getElementById("prev").getElementsByTagName("*")[0].onclick=green;
