Wie kann ich Elemente nach Klasse in JavaScript abrufen, insbesondere aus Gründen der IE-Kompatibilität?

Elemente nach Klasse in JavaScript abrufen, einschließlich IE-Kompatibilität

Das Abrufen eines Arrays von Elementen basierend auf ihrer Klasse ist eine häufige Aufgabe in JavaScript. Für Browser, die document.getElementsByClassName() nicht nativ unterstützen, wie z. B. IE, ist jedoch ein alternativer Ansatz erforderlich.

Eine beliebte Lösung ist die Funktion von Jonathan Snook. Diese Funktion verwendet einen regulären Ausdruck, um die className-Eigenschaft jedes Elements zu testen. Im IE wird jedoch die Fehlermeldung „Objekt unterstützt diese Eigenschaft oder Methode nicht“ ausgegeben.

Der Schlüssel besteht darin, zu erkennen, dass getElementsByClassName() keine Methode des Dokumentobjekts ist. Stattdessen sollte es direkt auf dem Knoten aufgerufen werden, auf dem Sie nach Elementen suchen möchten:

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

Für IE8 besteht ein prägnanterer Ansatz darin, die Funktion getElementsByClassName() mehrfach zu füllen:

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

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

Mit diesen Techniken können Sie Elemente nach Klasse abrufen und so die Kompatibilität mit IE und anderen Browsern sicherstellen.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente nach Klasse in JavaScript abrufen, insbesondere aus Gründen der IE-Kompatibilität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!