Was ist die beste Methode, um ein Array von Elementen abzurufen, die eine bestimmte Klasse haben?

Ich würde document.getElementsByClassName verwenden, aber IE unterstützt es nicht.

Also versuchte ich es Jonathan Snooks Lösung:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = document.getElementsByClassName(document.body,'tab');

…aber IE sagt immer noch:

Objekt unterstützt diese Eigenschaft oder Methode nicht

Irgendwelche Ideen, bessere Methoden, Fehlerbehebungen?

Ich würde es vorziehen, keine Lösungen mit jQuery oder anderem “sperrigem Javascript” zu verwenden.

Aktualisieren:

Ich habe es zum Laufen gebracht!

Wie @joe erwähnte, ist die Funktion keine Methode von document.

Der Arbeitscode würde also so aussehen:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = getElementsByClassName(document.body,'tab');

…Ebenfalls wenn Sie nur IE8+-Unterstützung benötigen dann geht das:

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll("." + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

Verwenden Sie es wie gewohnt:

var tabs = document.getElementsByClassName('tab');

Es ist keine Methode des Dokuments:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

tabs = getElementsByClassName(document.body,'tab');  // no document

Sie können die Funktion für ältere Browser erstellen

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}

function getElementsByClassName(className) {
if (document.getElementsByClassName) { 
  return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }

Ziemlich sicher, dass dies die gleiche Funktion wie Leonid ist, aber diese verwendet document.getElementsByClassName wann es kann.

Sie können getElementsByClassName nicht wirklich replizieren, da es eine nodeList zurückgibt und sein Wert daher live ist und mit dem Dokument aktualisiert wird.

Sie können ein statisches Array von Elementen zurückgeben, die dieselben Klassennamen haben – aber es wird nicht „wissen“, wenn sich das Dokument ändert.

(Es braucht nicht allzu viele solcher Dinge, um eine Bibliothek schlank aussehen zu lassen …)

function getArrayByClassNames(classes, pa){
    if(!pa) pa= document;
    var C= [], G;
    if(pa.getElementsByClassName){
        G= pa.getElementsByClassName(classes);
        for(var i= 0, L= G.length; i<L; i++){
            C[i]= G[i];
        }
    }
    else{
        classes= classes.split(/\s+/);
        var who, cL= classes.length,
        cn, G= pa.getElementsByTagName('*'), L= G.length;
        for(var i= 0; i<cL; i++){
            classes[i]= RegExp('\\b'+classes[i]+'\\b');
        }
        classnameLoop:
        while(L){
            who= G[--L];
            cn= who.className;
            if(cn){
                for(var i= 0; i<cL; i++){
                    if(classes[i].test(cn)== false) {
                        continue classnameLoop;
                    }
                }
                C.push(who);
            }
        }
    }
    return C;
}

//Beispiel

var A= getArrayByClassNames(‘sideBar local’)

IE8:

document.getElementsByClassName = function (className) {
    return document.querySelectorAll('.' + className)
}

function _getClass(whatEverClasNameYouWant){
var a=document.getElementsByTagName('*');
   for(b in a){
      if((' '+a[b].className+' ').indexOf(' '+whatEverClasNameYouWant+' ')>-1){
      return a[b];
      }
   }
}

Ich will mich nur verbessern querySelectorAll Fallback für IE8.

Wie andere geantwortet haben, ist der einfache Weg, die Funktion hinzuzufügen Element.prototype mit

this.querySelectorAll('.' + className);

Aber es gibt einige Probleme:

• Es funktioniert nicht mit ungetrimmten Saiten (am Anfang).
• Mit mehreren Klassen geht das nicht.
• Es funktioniert nicht mit “seltsamen” Klassenzeichen (/, $, *etc.)
• Es funktioniert nicht mit Klassen, die mit einer Ziffer beginnen (ungültige Bezeichner)

Das heißt, es sollte etwas “Fixieren” geben, zum Beispiel:

"abcd"     ->  ".abcd"
"a   b cd" ->  ".a.b.cd"
"   a b  " ->  ".a.b  "
"a/b$c d"  ->  ".a\/b\$c.d"
"1234"     ->  ".\000031234"

Code:

this.querySelectorAll(className
    .replace(/(?=[^ \w])/g, '\\')   // Escape non-word characters
    .replace(/\b\d/g, '\\00003$&')  // Escape digits at the beginning
    .replace(/(^| +)(?!$| )/g, '.') // Add "." before classes, removing spaces
);