HTMLSelectElement.labels — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.labels

Beschreibung

Über HTMLSelectElement.labels kommt man an alle Beschriftungen eines Auswahlfelds, ohne selbst im DOM suchen zu müssen. Ein <label> gilt als verknüpft, wenn sein for-Attribut der id des <select> entspricht oder wenn das <select> das erste beschriftbare Element innerhalb des <label> ist (implizite Verknüpfung).

Die zurückgegebene NodeList ist live: Kommen neue Labels hinzu oder werden welche entfernt bzw. umverknüpft, ändert sich ihr Inhalt automatisch. Die Reihenfolge entspricht der Dokumentreihenfolge. Gibt es kein Label, ist die Liste leer (length === 0), nicht null.

Typische Einsätze sind Formularvalidierung (Label bei Fehler hervorheben), das Auslesen des Label-Texts für Fehlermeldungen oder Barrierefreiheitsprüfungen, bei denen man feststellt, ob ein Feld überhaupt beschriftet ist.

Rückgabewert

Typ

NodeList<HTMLLabelElement>

Beschreibung

Live-NodeList mit allen verknüpften <label>-Elementen in Dokumentreihenfolge; leer, wenn keine Labels existieren.

Beispiele

Label-Texte eines Auswahlfelds auslesen

// HTML:
// <label for="land">Land</label>
// <label>Ihr Wohnsitz: <select id="land"><option>DE</option></select></label>
const select = document.getElementById('land');

console.log(select.labels.length);
for (const label of select.labels) {
  console.log(label.textContent.trim());
}

2 Land Ihr Wohnsitz: DE

Label bei Validierungsfehler hervorheben

// HTML: <label for="groesse">Größe</label>
// <select id="groesse" required><option value="">– bitte wählen –</option><option>M</option></select>
const select = document.querySelector('#groesse');

const pruefen = () => {
  const ungueltig = !select.checkValidity();
  select.labels.forEach((label) => label.classList.toggle('fehler', ungueltig));
  return !ungueltig;
};

select.addEventListener('change', pruefen);
console.log(pruefen());

false

Unbeschriftete Auswahlfelder finden (Barrierefreiheit)

const ohneLabel = [...document.querySelectorAll('select')]
  .filter((sel) => sel.labels.length === 0 && !sel.hasAttribute('aria-label'));

ohneLabel.forEach((sel) => {
  console.warn('Select ohne Beschriftung:', sel.name || sel.id || sel);
});

Select ohne Beschriftung: sortierung

Live-Verhalten der NodeList

const select = document.createElement('select');
select.id = 'farbe';
document.body.append(select);

const labels = select.labels;
console.log(labels.length);

const label = document.createElement('label');
label.htmlFor = 'farbe';
label.textContent = 'Farbe';
document.body.append(label);

console.log(labels.length); // gleiche Referenz, aktualisiert

0 1

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an labels wird ignoriert (im Strict-Mode TypeError). Labels verknüpft man über label.htmlFor bzw. das for-Attribut oder durch Verschachtelung.
Live-Liste: Wer beim Iterieren Labels entfernt oder umhängt, sollte vorher mit [...select.labels] eine statische Kopie anlegen.
Nur im Dokument: Verknüpfungen per for werden nur innerhalb desselben Baums (Dokument bzw. Shadow Root) aufgelöst; ein Label außerhalb eines Shadow Roots wird nicht gefunden.
aria-label und aria-labelledby tauchen in labels nicht auf – für eine vollständige Barrierefreiheitsprüfung diese Attribute zusätzlich beachten.
Kompatibilität: In allen modernen Browsern verfügbar; Firefox erst ab Version 56, der alte Internet Explorer unterstützt die Eigenschaft nicht.

Siehe auch

HTMLButtonElement.labels HTMLSelectElement.name HTMLSelectElement.length HTMLSelectElement.size HTMLSelectElement.type