Need object.getElementsByClassName snippet

Hi,

I am trying to get the Youtube Classic Viewer userscript to operate:

http://userscripts.org/scripts/review/101753

Unfortunately, script will not run because I don't have getElementsByClassName in my browser webkit.

I tried adding a generic getElementsByClassName snippet, but it doesn't work as a subsidiary function,

(i.e.) parentObject.getElementsByClassName("class name")[i]

"is not a function." -- javascript error console message

even when I insert a javascript library snippet at the bottom of the script (I tried several snippets from back before the function became standard in recent browsers).

Anyone have a javascript library version I can add to the userscript to get it to work, or do I have to upload it in some other fashion?

Bear in mind, I'm not too knowledgeable about Javascript, especially when it comes to object handling and adding in built-in functions.

BTW if you look at the script at the above link, you'll see what I mean -- half the script is getElementsByClassName() calls, and they are all called as an extension of another object, i.e. variable.getElementsByClassName(foo)[0] == bla bla bla.

When I tried a couple (poorly written, from what I could tell) javascript library versions of getElementsByClassName, it wouldn't recognize variable.getElementsByClassName() as a function, even when variable was an array of elements (by tag name etc. -- see script in above link).

So what I need is:

* a script library version of getElementsByClassName for my older browsers, that don't have native support for the function

* it has to work as a suffix on a larger object in the DOM, object.getElementsByClassName() searches within object (I assume?)

* Where should I insert the snippet to get it to work as such? As a function in the userscript? In a javascript extension library somewhere (not sure where?) It's a userscript, so...

you can try this (insert it anywhere, I think)

Code:

---

document.getElementsByClassName=function (theclass) {
els=document.getElementsByTagName("*")
temp=[]
for (var k=0; k<els.length; k++) {
if(els[k].className==theclass){
temp.push(els[k])
                }
        }
return temp;       
}

---

xelawho's solution looks good. Additionally, if you want to prevent overwriting an already existing document.getElementsByClassName() method, you could do something like:

Code:

---

document.getElementsByClassName = document.getElementsByClassName || function (theclass) { etc. etc.

---

Also, if as you mentioned you want to search for elements belonging to a particular class that are within a specific element, keep in mind that the object representing an element also provides a getElementsByTagName() method -- this version of the method returns objects for just those elements that are found within the element on which it is called. So you might write a global getElementsByClassName() function that takes as parameters both the class name and the object for the element in which you want to search (or 'document' if you want to search globally).

Quote:

---

Originally Posted by mjy

So you might write a global getElementsByClassName() function that takes as parameters both the class name and the object for the element in which you want to search (or 'document' if you want to search globally).

---

yes, and this is the weak point of the script I provided - that it will only work if called by the document object, like so:

Code:

---

document.getElementsByClassName("red")[0].style.backgroundColor="red"

---

but leoghost's script has all sorts of objects calling that function:

Code:

---

crashNotice.getElementsByClassName("debugLink")[0].setAttribute("href", window.location + "&debug=1");
DescPanel.getElementsByClassName("url")[0].setAttribute("href", userURL);

---

etc

so I tried to write a function that would accept a call from any object, but this is where my knowledge of javascript really let me down - testing in IE (because it's the most picky of the browsers that I have) I couldn't get that to happen... it's simple enough to add this functionality to individual objects, but I guess what would be ideal would be a function that accepted a call from any object, then used that object as a variable. Some pseudocode:

Code:

---

theObject.getElementsByClassName=function (theclass) {
els=theObject.getElementsByTagName("*")
etc...

---

maybe someone with a little more experience has some ideas...

Quote:

---

Originally Posted by xelawho

but leoghost's script has all sorts of objects calling that function:

---

I guess I was assuming that leoghost's script could be rewritten to use a global function rather than element methods. Sadly, we can't just add a getElementsByClassName() implementation to HTMLElement's prototype so that all elements inherit it, because HTMLElement isn't a constructor and the DOM objects don't use the standard JavaScript inheritance mechanism.