SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross browser child node reference to run a script with?

    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
    Code:
    <!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
    Code:
    function green () {
    this.style.backgroundColor="green";
    };
    window.onload = function () {
    document.getElementById("prev").childNodes[1].onclick=green;
    }
    JavaScript for Internet Explorer
    Code:
    function green () {
    this.style.backgroundColor="green";
    };
    window.onload = function () {
    document.getElementById("prev").childNodes[0].onclick=green;
    }

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this should work:
    Code:
    window.onload = function () {
    var child=document.getElementById("prev").childNodes[0];
    while(child.nodeType != 1) child=child.nextSibling;
    child.onclick=green;
    }
    I hope that helps.
    Last edited by BonRouge; Nov 23, 2006 at 10:16. Reason: to remove my mistake

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if you know exactly what element you're looking for, try
    Code:
    document.getElementById("prev").getElementsByTagName('A')[0]
    which basically says "first anchor in prev", or, more general
    Code:
    document.getElementById("prev").getElementsByTagName('*')[0]
    which is "first Element and not TextNode".

    hth

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox includes the white spaces, IE does not. You could write a function that excludes the white spaces and return an Array of nodes of type Element.

    Another solution would be to simulate IE's children collection for Mozilla (you need wrap this around and if so that IE doesn't get this code):
    Code:
    HTMLElement.prototype.__defineGetter__("children", function () {
         var aChildNodes = [];
    
         for(var i=0, oNode; oNode = this.childNodes[i]; i++)
         {
              if(oNode.nodeType == 1)
              {
                   aChildNodes.push(oNode);
              }
         }
    
         return aChildNodes;
    });
    You could then use the children collection instead for both browsers like this:
    Code:
    function green ()
    {
        this.style.backgroundColor = "green";
    }
    
    window.onload = function ()
    {
        document.getElementById("prev").children[0].onclick = green;
    }
    If you find this to be an overkill you could simply remove the white spaces from your HTML code...

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for those responses they were quite helpful.
    Marc


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •