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
    New Coder
    Join Date
    Dec 2002
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Traverse DIVs using getElementById

    If I have the following in my document

    <DIV id="leftdiv">
    <DIV id="innerDiv1">
    <DIV id="innerDiv1a">
    <input id="input1">
    </DIV>
    </DIV>
    </DIV>


    How would I get a reference to the input1 element using "getElementById"?


    I'm trying (document.getElementById("leftdiv")).document. ...

    thank you!
    John

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Please post this in a more relevant forum next time. I had to move it here.

    Anyway:

    document.getElementById('leftDiv').firstChild.firstChild.firstChild

    Or since you have them all id'ed:

    document.getElementById('innerDiv1a').firstChild

  • #3
    New Coder
    Join Date
    Nov 2002
    Location
    London, UK
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was wondering, can't you just say

    document.getElementById("input1")

    Adam

  • #4
    New Coder
    Join Date
    Dec 2002
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, my example was too simple.

    I REALLY WANT TO KNOW HOW TO: "getElementById", use that element's document to "getElementById" ... and so on.

    Is there a way to do that?

    FYI, I will know how many time's that I'll need to repeat the sequence.

    NOTE: My innerDiv1, innerDiv2, ... are distinct, but their contents innerDiv1a, input1 ARE NOT! They get repeated as in the following example:

    <DIV id="leftdiv">

    <DIV id="innerDiv1">
    <DIV id="innerDiv1a">
    <input id="input1">
    </DIV>
    </DIV>

    <DIV id="innerDiv2">
    <DIV id="innerDiv1a">
    <input id="input1"> THIS IS THE ONE I WANT
    </DIV>
    </DIV>

    <DIV id="innerDiv3">
    <DIV id="innerDiv1a">
    <input id="input1">
    </DIV>
    </DIV>

    </DIV>

    THANKS AGAIN!!!
    John

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can't have multiple elements with the same id.

    I do not really understand what you want,but you should try using getElementsByTagName.

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Adam20002
    I was wondering, can't you just say

    document.getElementById("input1")

    Adam
    LOL! I didn't notice the <input/> *had* an id.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    getElementsByTagName could be the one, and with a bit of scripting you can create your own getElementsByClassName function, which I find very useful, eg (for divs):

    Code:
    <script>
    
    var divAry=new Array;
    var i=0;
    
    function getElementsByClassName(cName) {
    var divCollection = document.getElementsByTagName("div");
    var divLen = divCollection.length;
    for(i=0;i<divLen;i++){
    if(divCollection[i].className==cName) { divAry[i]=divCollection[i]; i++; }
    }
    }
    
    
    
    </script>
    
    
    <a href="javascript:getElementsByClassName('small');alert(divAry);">getElementsByClassName</a>
    Last edited by brothercake; 01-10-2003 at 05:46 PM.


  •  

    Posting Permissions

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