info@a-coding-project.de

JavaScript get element by class

Mit der Funktion document.getElementsByClassName erhält man in JavaScript eine Referenz auf alle Objekte im DOM, die einen bestimmten Klassennamen enthalten.

In diesem Beispiel sollen von einer Reihe an HTML-Elementen nur diejenigen, die einen bestimmten Klassennamen haben, ausgewählt werden.

<p class="meine-klasse">get</p>
<p>elements</p>
<p class="meine-klasse">by</p>
<p>class</p>
<p class="meine-klasse">name</p>

Hier das entsprechende JavaScript:

var meineElemente = document.getElementsByClassName('meine-klasse');

for(var i = 0; i < meineElemente.length; i++) {
    meineElemente[i].style.color = 'red';
}

Der Rückgabewert der Funktion document.getElementsByClassName ist eine HTMLCollection. Diese wird dann per for-Schleife durchlaufen und jedem Element als Farbe rot zugeordnet.

Wichtig: Eine HTMLCollection ist kein Array, obwohl sie auf den ersten Blick sehr ähnlich scheint. Eine HTMLCollection kann daher auch nicht mit Array-Methoden wie der foreach-Schleife bearbeitet werden.

Browserkompatibilität

Einige ältere Browser wie der Internet Explorer 8 unterstützen die Funktion nicht. Hier kann eine JavaScript-Bibliothek wie jQuery helfen, die mit ihrer einfachen Syntax zum Selektieren von DOM-Elementen eine einheitliche Schnittstelle für die meisten Browser bietet.

Mit jQuery würde der JavaScript-Code dann so aussehen:

$('.meine-klasse').css('color', 'red');

Von Vorteil ist hier vor allem die kompakte und an CSS-Selektoren angelehnte Schreibweise. Außerdem entfällt hier – verglichen mit dem erstem Beispiel – das mühsame Schreiben einer for-Schleife.

Achtung: jQuery unterstützt ab Version 2.x den Internet Explorer 8 nicht mehr!

JavaScript bietet nativ eine ganz ähnliche Schnittstelle wie jQuery. Die Funktionen document.querySelector zum Selektieren eines einzelnen Elements und document.querySelectorAll zum Selektieren aller Elemente, auf die der Selektor zutrifft. Die beiden Methoden sind mittlerweile browserübergreifend einsetzbar.

	document.querySelector('.meine-klasse');

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant