Überprüfen Sie, ob ein Element eine Klasse in JavaScript enthält
-
Verwenden Sie die integrierte
element.classList.contains()-Methode, um zu prüfen, ob ein Element eine Klasse in JavaScript enthält -
Verwenden Sie einen Abfrageselektor und die Methode
Element.matches(), um zu prüfen, ob ein Element eine Klasse in JavaScript enthält -
Verwenden Sie
indexOf(), um zu prüfen, ob ein Element eine Klasse in JavaScript enthält
Die Verwendung von Klassen in HTML ermöglicht es Ihnen, Elemente zu gruppieren und die gleichen Operationen für alle in Bezug auf Stil oder Funktionalität durchzuführen. Auf diese Weise können Sie das Verhalten aller Elemente, die eine Klasse gemeinsam nutzen, in einer einzigen Codezeile leicht ändern.
Es gibt Situationen, in denen Sie möchten, dass ein Element Teil mehrerer Klassen ist. HTML ermöglicht Ihnen dies, aber es gibt bestimmte Regeln, die Sie befolgen müssen, um unerwartetes Verhalten zu vermeiden.
Außerdem wird die Auswahl von Elementen nach Klasse in JavaScript etwas kniffliger, wenn sie mit mehreren Klassen getaggt sind. Mach dir keine Sorge; wir können überprüfen, ob ein Element eine bestimmte Klasse enthält.
Verwenden Sie die integrierte element.classList.contains()-Methode, um zu prüfen, ob ein Element eine Klasse in JavaScript enthält
Es überrascht nicht, dass dieser Anwendungsfall häufig genug ist, um seine native Methode in JavaScript zu haben, was Ihre erste Option sein sollte, wenn keine anderen besonderen Anforderungen bestehen.
Der Kern dieser Methode besteht darin, ein Element abzurufen, alle Klassen zu durchlaufen, zu denen es gehört, und dann zu prüfen, ob die Klasse, die Sie ihm als Argument übergeben, tatsächlich Teil der Liste ist. So funktioniert das in der Praxis:
<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById('mydiv');
console.log(element.classList.contains('myclass1'));
Ausgabe:
true
Der obige JavaScript-Code ist mit allen modernen Browsern kompatibel, obwohl einige Probleme in sehr alten Internet Explorer-Versionen auftreten können.
Verwenden Sie einen Abfrageselektor und die Methode Element.matches(), um zu prüfen, ob ein Element eine Klasse in JavaScript enthält
Abfrageselektoren sind sehr leistungsfähige JavaScript-Tools, zumal sie normalerweise alles tun können, was jQuery tut, außer dass Sie keine Bibliothek eines Drittanbieters benötigen.
In diesem Fall können Sie mit dem Abfrageselektor das Element auswählen, das Sie überprüfen möchten, während Sie mit der Methode Element.matches() noch einmal überprüfen können, ob die Klasse vorhanden ist oder nicht.
<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.querySelector('#mydiv');
console.log(element.matches('.myclass1'));
Ausgabe:
true
Wie Sie sehen können, ist der für beide Methoden erforderliche Code in Bezug auf Komplexität und Länge mehr oder weniger gleich. Der Abfrageselektor erfordert jedoch einen moderneren Browser als die Methode classList.contains(), also denken Sie auch daran.
Verwenden Sie indexOf(), um zu prüfen, ob ein Element eine Klasse in JavaScript enthält
Während moderne Browser beide oben beschriebenen Methoden unterstützen, haben Sie diesen Luxus möglicherweise nicht. Wenn Ihr Code also mit sehr alten Browserversionen kompatibel sein muss, können Sie dasselbe Ergebnis auch mit der Methode indexOf() erzielen. So funktioniert es:
<div id="mydiv" class="myclass1 myclass2">My Element</div>
let element = document.getElementById('mydiv');
function containsClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}
console.log(containsClass(element, 'myclass1'));
Ausgabe:
true
Natürlich ist diese Methode komplizierter, obwohl die Ergebnisse die gleichen sind. Im Wesentlichen erstellen wir unsere Methode namens containsClass, die die Liste der Klassen für unser Element durchläuft.
Wenn die gesuchte Klasse gefunden wird, hat sie einen Index von 0 oder größer und die Methode gibt true zurück.