SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict jasongr's Avatar
    Join Date
    Jul 2004
    Location
    usa
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getting access to dom elements

    Hello

    Assume I have the following HTML tags:
    Code:
    <div id="container"
     <div id="a" />
     <div id="b" />
     <div id="c">
       <div id="d" />
     </div>
     <div id="e" />
    </div>
    I need to write a JavaScript code that does the following:
    Get a reference to the "container" element
    get an array of all its direct children

    Iterate over its children array and print their id value
    In the example above, the direct children would be:
    a, b, c and e

    Note the d is left out because it is not a direct child of the "container"

    I need the code to run on both IE and Firefox
    I need a solution that will work even if the container's direct children are not div elements, but any html tags

    any help would be appreciated

  2. #2
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var parent = document.getElementById("container");
    var cur = parent.firstChild;
    while (cur != null)
    {
    // check if it is an element (ignore text nodes)
    if (cur.nodeType == 1)
    {
    // do whatever your wand
    alert ("node: " + cur.nodeName + " id: " + cur.getAttribute("id"));
    }
    cur = cur.nextSibling;
    }
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Array (or rather 'collection') of direct children of some element is called (surprise) 'children'. Note that in some browsers/modes this collection will also include whitespace between tags.

  4. #4
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stereofrog
    Array (or rather 'collection') of direct children of some element is called (surprise) 'children'. Note that in some browsers/modes this collection will also include whitespace between tags.
    I rather iterate through the nodes like this. It became a habit mostly because I often change the dom through javascript, when using 'children' it misses nodes i add (f.e. when I recursivly go through the dom tree) and processes nodes i delete. with nextSibling I always know that I catch all nodes.

    The whitespace is taken care of by checking the nodeType (1=Element).

    Which brings up the question: is it faster/better using an array or walking thorugh it with nextSibling.
    When using children I have the array object and the counter, when walking through i only have a pointer. (does it make any difference?)
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  5. #5
    SitePoint Addict jasongr's Avatar
    Join Date
    Jul 2004
    Location
    usa
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    I like NikoB's solution which is more robust and doens't assume anything about its input

    I think I will use it

  6. #6
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NikoB
    Which brings up the question: is it faster/better using an array or walking thorugh it with nextSibling.
    When using children I have the array object and the counter, when walking through i only have a pointer. (does it make any difference?)
    I don't think there is any singificant difference. The advantage of using collections is that they play good with iterators. So, one can define a generic 'eachTag(collection, function)' iterator and then use instead of those nasty loops

    Code:
    eachTag(someElem.children, function(e) {
       e.style.display = "none";
    })


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
  •