Wie stellt man fest, dass alle Elemente gleiche…

Klassen (class) und IDs (id) sind HTML-Attribute, die es ermöglichen, Elemente für die Gestaltung mit CSS und die Interaktion mit JavaScript auszuwählen.

Klasse:

Kann mehreren HTML-Elementen zugewiesen werden.
Wird verwendet, um Elemente mit gemeinsamen visuellen oder verhaltensbezogenen Eigenschaften zu gruppieren.
In CSS beginnt der Selektor einer Klasse mit einem Punkt (.), z.B.: .meine-klasse.
In JavaScript werden Elemente nach Klasse mit den Methoden getElementsByClassName oder querySelectorAll ausgewählt.

Identifikator:

Muss innerhalb der gesamten HTML-Seite einzigartig sein.
Wird verwendet, um ein bestimmtes Element zu identifizieren.
In CSS beginnt der Selektor eines Identifikators mit einem Hash (#), z.B.: #mein-id.
In JavaScript wird das Element nach ID mit der Methode getElementById ausgewählt.

Beispiel:

  <div class="karte">
      <p>Text der Karte 1</p>
  </div>
  <div class="karte">
      <p>Text der Karte 2</p>
  </div>
  <button id="meinButton" class="btn">Knopf</button>

  .karte { /* Stilisiert alle Elemente mit der Klasse "karte" */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #meinButton { /* Stilisiert nur das Element mit ID "meinButton" */
      background-color: blue;
      color: white;
  }

  .btn { /* Gemeinsame Stile für alle Buttons */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Alle Elemente mit der Klasse "karte" holen
  const karten = document.getElementsByClassName('karte');

  // Das Element mit ID "meinButton" holen
  const button = document.getElementById('meinButton');

  // Einen Klick-Event-Handler zum Button hinzufügen
  if (button) {
      button.addEventListener('click', () => {
          alert('Button wurde gedrückt!');
      });
  }

Sowohl Klassen als auch IDs sind HTML-Attribute, die direkt im Markup gesetzt werden. Sie ermöglichen die Verwendung für Styling (über CSS) und Verhaltenskontrolle (über JavaScript). Die Verwendung von Klassen für ähnliche Elemente und eindeutigen IDs für einzelne Elemente ist eine bewährte Praxis.

Wie stellt man fest, dass alle Elemente gleiche Eigenschaften haben, wie Klasse und Identifikator?