Help - Search - Members - Calendar
Full Version: DOM getElementsByTagName within a given class
HTMLHelp Forums > Programming > Client-side Scripting
Jonathan Stegall
Jan 4 2008, 11:47 AM
Hello,

I've been looking around for a way to do this, and haven't found one yet. Here's the scenario:

I know that it's possible to do the following:

CODE

var parent = document.getElementByID("someid");
var child = parent.getElementsByTagName("p");


And then to interact with child elements in whatever way one desires. Like many people, I use the following function to get an array of elements that have a given class:

CODE

function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }    
    }
    return returnElements;
}


So, what I'd like to do is essentially this:

CODE

var parent = getElementsByClassName("myclass");
var child = parent.getElementsByTagName("p");

And then to have the ability to interact with child in the same way that I could in the other example. I thought this would work, but apparently getElementsByClassName doesn't return the items in the same way that getElementByID does, because I can't use the result as a parent. Does anyone know a way to do this?

Thanks so much,
Jonathan
pandy
Jan 4 2008, 12:09 PM
I'm out on a limb here, I don't really know enough about DOM, I just want to test my own thinking. Someone will correct me if I'm too far off, I hope. blush.gif

Anyway, I think the difference is that getElementById() returns an element object. There's only one element with a certain id, right? getElementsByClassName() as well as getElementsByTagName() return an array of all the elements with that name or class. Note it's getElements, not getElement. I think the correct term is 'collection' not 'array', but I'm not sure what the difference is...

Maybe you can access the element you want by picking it out from the array? Assuming it's the first one or that there is only one...
CODE
document.getElementsByClassName('myclass')[0]


wacko.gif
Christian J
Jan 4 2008, 03:07 PM
I think pandy's correct, but the OP's script above seems unnecessarily complicated (or it's just me that doesn't know enough JS).

If I understand the OP correctly, you don't know what kind of element the parent is, only that it uses the CLASS "myclass"? Then you might use

CODE

function get_children(level)
{
    for(var i=0; i<level.childNodes.length; i++)
    {
        if(level.childNodes[i].className=='myclass')
        {
            var p=level.childNodes[i].getElementsByTagName('p');
            for(var j=0; j<p.length; j++)
            {
                alert(p[j].innerHTML);
            }
        }
        if(level.childNodes[i].hasChildNodes)
        {
            get_children(level.childNodes[i]);
        }
    }
}
get_children(document.body);

(Nit pick: childNodes returns all kinds of child nodes, like elements, text nodes (inkluding code formatting in some browsers) and comment nodes. Probably this doesn't matter in this script, since only element nodes can have CLASS attributes, but in other cases you might check it with the nodeType property: http://www.quirksmode.org/dom/w3c_core.html )

It's also possible to use

CODE

var all_elements=document.getElementsByTagName('*');
for(var i=0; i<all_elements.length; i++)
{
    if(all_elements[i].className=='myclass')
    {
        var p=all_elements[i].getElementsByTagName('p');
        for(var j=0; j<p.length; j++)
        {
            alert(p[j].innerHTML);
        }
    }
}

but IE5.5 and some other older browsers don't support the wildcard value.

EDIT: rewrote the childNodes script, since the previous version didn't check for deeper nested elements.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.