Kontakt aufnehmen
Wir stellen ein: PHP-Entwickler (m/w/d) Key Account Manager (m/w/d)

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

Karriere bei a coding project - Wir freuen uns auf dich!

Alle unsere Stellen sind Remote oder an unseren Standorten in Münster und Wuppertal verfügbar:

// Warum Du Dich für uns entscheiden solltest

  • Regelmäßig neue Projekte, die Du von Grund an mit planen und aufbauen kannst
  • Arbeit in einem wachsenden IT-Unternehmen
  • So viel Home-Office wie Du möchtest - Und einen Arbeitsplatz in unserem Büro in Münster
  • Wöchentliche Vorträge: Jeden Freitag hält ein Mitarbeiter einen Vortrag über ein Fachthema seiner Wahl
Karriere

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern