6.2.12 Der Unterschied zwischen Klassen und IDs

Nachdem Sie nun Klassen und IDs kennengelernt haben, wollen wir nochmal auf die Unterschiede eingeghen - weil es so wichtig ist. Beide dienen dazu, ein Element genauer zu bezeichnen. Der Unterschied ist folgender:

IDs

  • sind eine eindeutige Bezeichnung, d.h. innerhalb eines HTML-Dokumentes dürfen sie nur einmal verwendet werden
  • Attribute können durch die JavaScript-Funktion getElementByID aufgerufen werden (was aber heutzutage nicht mehr so bedeutend ist)
  • sind auch als Ankerziele verwendbar

Klassen

  • binden eine Style-Definition an ein HTML-Element
  • können beliebig oft verwendet werden
  • eine Klasse kann von unterschiedlichen Elementen genutzt werden
  • werden durch Verkettung in den Selektoren zum Teil auch sehr spezifisch

IDs und Klassen sind also zwei unterschiedliche Konzepte. Während in einem Dokument das Klassen-Konzept „wichtige Informationen“ oft auftauchen kann, kann es nur einmal das ID-Konzept „Einleitung“ geben.

Note

Wir werden im Kapitel JavaScript noch sehen, dass sich IDs sehr gut für „HTML“-Manipulationen eignen. IDs können zwar zum Stylen mit CSS verwendet werden, doch im Regelfall verwendet man dafür die Klassen und nutzt die IDs als Marker im DOM.

Was hat Vorrang Klassen oder IDs?

Ein weiterer Unterschied ist die Wertigkeit: ID-Attribute haben eine höhere Wertigkeit als Klassen. Wird ein HTML-Element mit einer ID und einer Klasse gekennzeichnet, so werden zunächst alle Eigenschaften der ID auf das Element angewendet und erst anschließend die Eigenschaften, die das Element noch nicht besitzt, aus der Klasse übernommen. Hierauf gehen wir im Kapitel zu der Spezifizität noch ein. Aber hier schon mal ein Beispiel:

Definition im Stylesheet

1
2
3
4
5
6
7
8
#einleitung {
    color: blue; 
}

.hinweis {
    color: purple;
    text-decoration: underline; 
}

Das zugehörige HTML-Element:

1
2
3
<p id="einleitung" class="hinweis">
    Was ist das stärkste Tier? – Die Schnecke, sie trägt ihr Haus auf dem Rücken.
</p>

Der Text wird blau und unterstrichen dargestellt, da eine ID gegenüber einer Klasse eine höhere Wertigkeit hat. Die ID legt die Schriftfarbe blue fest, die von der Klasse hinweis nicht überschrieben wird. Allerdings wird die Eigenschaft text-decoration: underline aus der Klasse angewendet, da diese Eigenschaft in der ID nicht definiert ist.


IDs und Klassen in JavaScript nutzen

Ob Sie eine ID oder eine Klasse nutzen, hängt von der Flexibilität und der Einzigartigkeit des HTML-Elements ab. Klassen sind vielseitiger, da sie mehrfach verwendet werden können, während IDs für eindeutige Elemente reserviert sind.

In JavaScript gibt es zwei gängige Methoden, um Elemente im DOM auszuwählen:

  • getElementById: Diese Funktion ist schnell und einfach, wird jedoch nur für Elemente mit einer eindeutigen ID verwendet. Wir nutzen dies, wenn wir wissen, dass die ID eindeutig ist und direkt benötigt wird.

      document.getElementById('einleitung');
    

  • querySelector: Diese modernere Methode unterstützt CSS-Selektoren und kann sowohl IDs, Klassen als auch andere Selektoren verwenden. Sie ist flexibler, aber etwas langsamer.

      document.querySelector('#einleitung');
    

In Frameworks wie React oder Vue wird fast ausschließlich mit Klassen gearbeitet, da diese flexibler sind und besser in Komponenten-Architekturen passen. IDs sind hier meist nur Marker für spezielle Zwecke.