Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts

    traversing a <div> with something more than just a for loop

    I was wondering if there was a way to traverse a div with something more than just a for loop...do I hear an echo.

    Basically what I mean is, after I get a node say by doing getElementByID("something") and lets say that node has many children, and grandchildren, is there a way to get to those children and grandchildren in a way better than just doing a for loop.

    I guess I can also design it in such a way that I can get to the grandchildren just by ID, but I am asking this in general using my structure, and I don't want to change my structure around too much. Thanks for the help guys.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Depends on what you want to do, really. Do you just want a flat collection of all contained nodes? Then [object HTMLDivElement].getElementsByTagName('*') will return the collection you are looking for. If you're looking for a hierarchical list, the best solution would be a while loop:
    Code:
    var
        oChildren=document.getElementById("something").childNodes,
        oNode,
        i=0;
    while((oNode=oChildren.item(i++))){
        /*  loop body working with oNode  */
    }
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess what I'm looking for is say I have a handle on a node, and then I want to get to a very specific grandchild node by name (<div> name). Would you say the second way, the loop, is the best way then?

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by deadseasquirrel
    I guess what I'm looking for is say I have a handle on a node, and then I want to get to a very specific grandchild node by name (<div> name). Would you say the second way, the loop, is the best way then?
    By 'name', do you mean <div name=""> (use getElementsByName) or 'div' in <div ...> (use getElementsByTagName)? I'll assume you mean the first.
    Code:
    document.getElementById('id').getElementsByName('name')[0]
    assuming that there's only one child with that particular name within div#id. If there's more you'll need to loop through them with an if() statement to check each one against some other criterion.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    What do you mean by "name"? A class you have given it? If so, no, the following would be better:
    Code:
    var
        oDiv,
        i=0;
    while((oDiv=oAncestor.getElementsByTagName('div').item(i++))){
        if(/\bclassNameToTestFor\b/.test(oDiv.className)){
            /*  do something with oDiv  */
            break;
        }
    }
    However, if you meant that you have given it an ID, then it's better to chose the element based on ID and then check if any of it's ancestors happen to be the one you want (unless you know that it will be a decendant of it from the beginning, when you can drop that check).
    Code:
    var
        oDiv=document.getElementById('elementId');
    
    function isDecendant(decendant,ancestor){
        return ((decendant.parentNode==ancestor)  ||
            (decendant.parentNode!=document) &&
                isDecendant(decendant.parentNode,ancestor));
    }
    
    if(oDiv && isDecendant(oDiv, oAncestor)){
        /*  do something with oDiv  */
    }
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts
    getElementsByName(sName) wont return an element by an idref. You can look down the tree (contains) or up the tree, using parentNode -> parentNode.parentNode...

    something like that here getDescendantById -> http://dhtmlkitchen.com/res/js/utils.js

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    getElementsByName is severly broken. Not one browser has exactly the same behavior, and none of them match the spec. So, it;s not a good idea to use it.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

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