document.getElementByClassName - Cross Browser Fix

问题

I have looked at previous asks for help in a cross browser fix for document.getElementByClassName and found this link which provided a seemingly perfect fix.

However I have tried implementing it on a site that I have built but can not get the fix to work (or any others) on IE8 (the browser which I am working to get compatability with). I am still getting the "Object or Property is not supported" error meaning that the fix is obviously not working.

Coming up short for any reasons why this may not be working correctly and unable to find anyone with problems getting it to work I ask if you would be able to help me in getting this fix working.

The site I am trying to the fix working on is http://lifeswitch.org.nz.s125738.gridserver.com/

回答1:

You have created a global function called getElementsByClassName, not a method on the document object. You need to call getElementsByClassName or window.getElementsByClassName, not document.getElementsByClassName.

回答2:

This works (tested):

function getElementsByClassName(cn, rootNode) {
  if (!rootNode) {
    rootNode = document;
  } 
  for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) {
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

You could probably get away with adding it to Node.prototype, like this:

Node.prototype.getElementsByClassName = function(cn) {
  for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;) {
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

That should add it to browsers that don't have it, but it should be shadowed by browsers that do have it since they provide it farther down the prototype chain (not tested).

回答3:

In IE 8+ and in most new browsers.

Use document.querySelector and document.querySelectorAll. These methods allow you to accessing to any element by selector as in a css :)

 var e = document.querySelectorAll(".myClass"); //

Difference between them is that first get the first element from matched element, second method get collection of matched elements.

In demo : http://jsfiddle.net/f9cHr/ click on document to change color of elements.

And now:

getElementsByClassName = function( className , ctx  ) {
  var context = ctx ? ( typeof ctx =="string" ? document.querySelector( ctx ) : ctx ): document;
  return context.querySelectorAll && context.querySelectorAll( "." + className ) 
};

You can use this function when querySelector`s functions are present

 if( document.querySelector && document.querySelectorAll ) { 
     //getElementsByClassName = function from above here
 } else {
    //getElementsByClassName = function you are using here
 }

Use:

   var myClassInnerMyId = 
          getElementsByClassName( "myClass" , document.getElementById( "myId") );
       // = document.querySelectorAll( "#myId .myClass");

also

  someClassesInnerOtherId = getElementsByClassName( "myClass1,myClass2" , "#otherId");

  // = document.querySelectorAll( "#otherId myClass1, #otherId myClass2");

回答4:

How about modifying your code to use getElementsByTagName() instead which is supported by all major browsers

elements = document.getElementById(id).getElementsByTagName('a');

for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == t) {
        elements[i].className += ' animate';
    }
}

回答5:

The rule is "Keep It Simple"

if( !typeof document.getElementsByClassName == 'function'){
    Object.prototype.getElementsByClassName = function(cn) {
        if (!this) return null;
        for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;)
        if ( e[i].className.indexOf(cn)>-1) r.push(e[i]); 
        return r;  
    }
}

If the method exists then the function is not made.

Also, please be sure to keep your examples user friendly and readable.

Addendum, another way of using a loop...

if( !typeof document.getElementsByClassName == 'function'){
    Object.prototype.getElementsByClassName = function(cn) {
      if (!this) return null;
      var r=[],e=this.getElementsByTagName('*');
      for (i in e)
        if ( e[i].className.indexOf(cn)>-1) r.push(e[i]); 
      return r;  
    }
}

回答6:

I think you should start using JQuery as it will make it easy to select an element with it's class name it will be like $(".className")

来源：https://stackoverflow.com/questions/8800914/document-getelementbyclassname-cross-browser-fix

标签

javascript

internet-explorer-8

getelementsbyclassname