www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need object.getElementsByClassName snippet

  1. #1
    Join Date
    Jan 2012
    Posts
    2

    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.

  2. #2
    Join Date
    Jan 2012
    Posts
    2
    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...

  3. #3
    Join Date
    Nov 2010
    Posts
    978
    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;	
    }
    Last edited by xelawho; 01-27-2012 at 06:13 PM.

  4. #4
    Join Date
    Jan 2012
    Location
    United States
    Posts
    15
    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).
    Author of the Kindle book JavaScript : Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  5. #5
    Join Date
    Nov 2010
    Posts
    978
    Quote Originally Posted by mjy View Post
    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...

  6. #6
    Join Date
    Jan 2012
    Location
    United States
    Posts
    15
    Quote Originally Posted by xelawho View Post
    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.
    Author of the Kindle book JavaScript : Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles