SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessing child elements

    I am working on a tabbed menu and I want to be able to add multiple menus on a page. I am playing with a very simplistic snippet to try and access the child element using the parent elements id.

    Code:
    <div id="parent">
    <span id="child">Main Parent 1: Child</span>
    </div>
    <script language="JavaScript" type="text/javascript">
    
    var menu = document.getElementById( 'parent' );
    var c1 = document.getElementById( 'child' );
    		
    c1.style.color = 'red';
    
    </script>
    Obviously, I can access the child element like above. I need to be able to access the child node with the parent id also.

    Code:
    <div id="parent">
    <span id="child">Main Parent 1: Child</span>
    </div>
    <script language="JavaScript" type="text/javascript">
    
    var menu = document.getElementById( 'parent' );
    var c1 = document.getElementById( 'child' );
    		
    menu.c1.style.color = 'red';
    
    </script>
    This doesn't work at all. I am new to JS and not sure I am expecting too easy a solution. Any ideas on this?

    Below is a working example of the code.

    Code:
    <div id="menu1">
        <table class="tm_table" cellpadding="0" cellspacing="0" border="0" summary="Tab Menu">
            <tr>
                <td class="tm_td" onclick="selectTab( 'tab1' );"><div class="tm_default" id="tab1">Main</div></td>
                <td class="tm_td" onclick="selectTab( 'tab2' );"><div class="tm_default" id="tab2">File Admin</div></td>
                <td class="tm_td" onclick="selectTab( 'tab3' );"><div class="tm_default" id="tab3">Utilities</div></td>
                <td class="tm_td" onclick="selectTab( 'tab4' );"><div class="tm_default" id="tab4">News</div></td>
                <td class="tm_td" onclick="selectTab( 'help' );"><div class="tm_default" id="help">Help</div></td>
            </tr>
        </table>
        <div class="tm_outerDiv">
            <div class="tm_innerDiv">
                <div id="tab1_content"><h3>Main</h3>
                    Lorem ipsum dolor
                </div>
                <div id="tab2_content"><h3>File Administrator</h3>
                    In potenti
                </div>
            <div id="tab3_content"><h3>Utilities</h3>
                Sed erat hac 
            </div>
            <div id="tab4_content"><h3>News</h3>
                Fermentum justo 
            </div>
            <div id="help_content"><h3>Help</h3>
                <ul>
                    Fermentum justo
                </ul>    
            </div>
        </div>
    </div>    
    <script type="text/javascript">document.onload=initTabs( 'tab1,tab2,tab3,tab4,help' );</script>
    Last edited by mtjo; Apr 2, 2005 at 16:32. Reason: Adding more examples

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Experiment with this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type='text/javascript'>
    window.onload = function()
    {
      var menu = document.getElementById( 'parent' );
      var c1 = document.getElementById( 'child' );
    
      // Depending on the browser, menu's first child may be a text node:
    
      alert(
        'menu.firstChild.nodeName: ' + menu.firstChild.nodeName + '\n' +
        'c1.parentNode.nodeName: ' + c1.parentNode.nodeName
      );
    
      // We have to make an assumption about the child we're looking for.
      // I'll assume that it is the first span, so I start with menu's
      // firstChild then loop thru the siblings until I find a span:
      
      var c = menu.firstChild;
      while (c && c.nodeName.toLowerCase() != 'span') {
        c = c.nextSibling;
      }
      if (c) c.style.color = 'red';
    }
    </script>
    </head>
    <body>
    <div id="parent">
    <span id="child">Main Parent 1: Child</span>
    </div>
    </body>
    </html>
    In your last code post I see that you name the IDs consistently. So you could look for element.className == 'tab1Content' for example.

    Another way to do this is to use a function like the following:
    Code:
    // Part of X, a Cross-Browser.com Javascript Library, Distributed under the terms of the GNU LGPL
    
    function xWalkTree(n, f)
    {
      f(n);
      for (var c = n.firstChild; c; c = c.nextSibling) {
        if (c.nodeType == 1) xWalkTree(c, f);
      }
    }
    You'd call it like this:

    Code:
    var m = document.getElementById('menu1');
    xWalkTree(m, menuWalker);
    
    function menuWalker(node)
    {
      if (node.className == etc...
    }
    menuWalker will be called once for every Element node in the sub-tree whose root is the element with id='menu1'.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike. I happened to see the other thread about your menu before I saw your reply here. Your tabbed menu degrades very nicely and doesn't require some hacks I had to use to hide the tab content divs on page load. I am gonna have to look over all this carefully. In the meantime, below is a link to a set of demo tabbed menus using various themes. One thing I required was for the active tab to keep its state on refresh.

    http://trilogyaudiometrics.com/dev/t..._2/tab_xp.html

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice!


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
  •