DOM getElementsByTagName within a given class, getting all the elements with a certain tag that are within an element |
DOM getElementsByTagName within a given class, getting all the elements with a certain tag that are within an element |
Jonathan Stegall |
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 |
pandy |
Jan 4 2008, 12:09 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
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] |
Christian J |
Jan 4 2008, 03:07 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,650 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 |
Lo-Fi Version | Time is now: 18th April 2024 - 06:49 AM |