The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> DOM getElementsByTagName within a given class, getting all the elements with a certain tag that are within an element
Jonathan Stegall
post Jan 4 2008, 11:47 AM
Post #1





Group: Members
Posts: 1
Joined: 4-January 08
Member No.: 4,641



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 4 2008, 12:09 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 4 2008, 03:07 PM
Post #3


.
********

Group: WDG Moderators
Posts: 7,893
Joined: 10-August 06
Member No.: 7



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 post has been edited by Christian J: Jan 7 2008, 10:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th September 2018 - 01:37 PM