Javascript document.getElementsByClassName Kompatibilität mit IE

Was ist die beste Methode, um ein array von Elementen mit einer bestimmten Klasse?

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

Also versuchte ich Jonathan Snook ist die 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

Irgendwelche Ideen, bessere Methoden, bug-fixes?

Würde ich lieber nicht verwenden, um irgendwelche Lösungen mit jQuery oder anderen "sperrigen javascript".

Update:

Ich es geschafft habe!

Als @joe erwähnt die Funktion ist keine Methode von document.

Also den funktionierenden code würde wie folgt 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');

...Auch wenn Sie nur IE8+ Unterstützung dann funktioniert:

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

Verwenden Sie es, wie normal:

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

Kommentar zu dem Problem

Sind Sie sicher, dass Ihr update-Recht? Sollte es nicht var tabs = getElementsByClassName(document.Körper,'tab'); **beachten Sie, dass ich entfernt Dokument.getEle... ** Kommentarautor: Anthony

Danke @Anthony. Ich nahm Joes Antwort. Kommentarautor: Web_Designer

Sind deine letzten Beispiele richtig? Sie passieren '.Registerkarte' aber sollte es nicht ohne die Zeit, da Ihre inneren Methode fügt die Zeit und wenn es mit dem IE9+, dann ist es nicht die Zeit, oder? Sollte es nicht var tabs = document.getElementsByClassName('tab');? Und warum hast du ein "oder", wenn die letzten beiden Beispiele sind die gleichen? Ich muss etwas fehlen. Kommentarautor: BoBoCoding

@BoBoCoding behoben. Kommentarautor: Web_Designer

InformationsquelleAutor der Frage Web_Designer | 2011-09-14

Es ist nicht eine 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

InformationsquelleAutor der Antwort Joe

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

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;
    }
}

InformationsquelleAutor der Antwort gdarcan

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

Ziemlich sicher, dass dies ist das gleiche wie Leonid Funktion, aber dies nutzt document.getElementsByClassName wenn man es kann.

InformationsquelleAutor der Antwort Mike_OBrien

Kann man nicht wirklich replizieren, getElementsByClassName, denn es gibt eine nodeList,
und damit Ihr Wert ist Leben, und updates mit dem Dokument.

Können Sie die Rückgabe einem statischen Array von Elementen, die denselben Klassennamen-
aber es wird nicht 'wissen' wenn das Dokument geändert wird.

(Es wird nicht zu viele von diese Art von Dingen zu machen, eine Bibliothek Aussehen, schlank...)

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')

InformationsquelleAutor der Antwort kennebec

IE8:

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

InformationsquelleAutor der Antwort Leonid

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

InformationsquelleAutor der Antwort Mohd Afique

0

Ich nur zu verbessern querySelectorAll - fallback für IE8.

Wie andere antwortete, die einfache Möglichkeit ist das hinzufügen der Funktion, um Element.prototype mit
```
this.querySelectorAll('.' + className);
```
Aber es gibt einige Probleme:
- Es funktioniert nicht mit unbeschnittenen strings (am Anfang).
- Es funktioniert nicht mit mehreren Klassen.
- Es funktioniert nicht mit "fremden" Klasse Zeichen ( / , $, * usw.)
- Es nicht mit Klassen arbeiten, die mit einer Ziffer beginnen (ungültige Bezeichner)
Das bedeutet, es sollte eine gewisse "Fixierung", 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
);
```
InformationsquelleAutor der Antwort Oriol

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Was ist die beste Methode, um ein array von Elementen mit einer bestimmten Klasse?

Update:

Code: