Signatur
Beschreibung
Die Eigenschaft labels eines HTMLMeterElement gibt eine live-NodeList zurück. Sie enthält alle <label>-Elemente, die dem <meter> zugeordnet sind. Ein Label ist zugeordnet, wenn sein for-Attribut die id des Meters enthält oder wenn das <meter> direkt im <label> verschachtelt ist.
Das ist praktisch, wenn du per Skript die Beschriftung einer Anzeige lesen oder ändern willst, etwa für Füllstände, Speicherauslastung oder Passwortstärke. Du musst dafür nicht selbst mit querySelectorAll('label[for=…]') suchen. Auch Barrierefreiheits-Prüfungen profitieren davon: Du erkennst schnell, ob ein Meter überhaupt eine sichtbare Beschriftung hat.
Weil die Liste live ist, zeigt sie Änderungen im DOM sofort an. Fügst du ein neues passendes Label ein oder entfernst eines, ändert sich labels.length ohne erneute Abfrage. Die Eigenschaft ist schreibgeschützt: Eine Zuweisung hat keine Wirkung.
Rückgabewert
NodeList mit den zugeordneten HTMLLabelElement-Objekten in Dokumentreihenfolge. Die Liste ist leer, wenn kein Label verknüpft ist.Beispiele
Zugeordnete Labels auslesen
// HTML:
// <label for="akku">Akkustand</label>
// <meter id="akku" min="0" max="100" value="72"></meter>
const meter = document.getElementById('akku');
for (const label of meter.labels) {
console.log(label.textContent);
}
console.log(meter.labels.length);Label-Text dynamisch mit dem Wert aktualisieren
// HTML:
// <label for="speicher">Speicher</label>
// <meter id="speicher" min="0" max="512" low="300" high="450" value="0"></meter>
const meter = document.querySelector('#speicher');
const setzeBelegung = (gb) => {
meter.value = gb;
const prozent = Math.round((gb / meter.max) * 100);
meter.labels.forEach((label) => {
label.textContent = `Speicher: ${gb} GB belegt (${prozent} %)`;
});
};
setzeBelegung(384);
console.log(meter.labels[0].textContent);Barrierefreiheit prüfen: Meter ohne Beschriftung finden
const unbeschriftet = [...document.querySelectorAll('meter')].filter(
(m) => m.labels.length === 0 &&
!m.hasAttribute('aria-label') &&
!m.hasAttribute('aria-labelledby')
);
unbeschriftet.forEach((m) => {
console.warn('Meter ohne Label:', m.id || m.outerHTML);
});Live-Verhalten der NodeList
const meter = document.createElement('meter');
meter.id = 'staerke';
document.body.append(meter);
const labels = meter.labels;
console.log(labels.length); // 0
const label = document.createElement('label');
label.htmlFor = 'staerke';
label.textContent = 'Passwortstärke';
document.body.prepend(label);
console.log(labels.length); // automatisch aktualisiert// Wichtig · Fallstricke
- Live-Liste: Die
NodeListändert sich mit dem DOM. Wenn du Labels entfernst, während du über die Liste läufst, kopiere sie vorher mit[...meter.labels]oderArray.from(). - Nur
<label>-Elemente: Beschriftungen überaria-labeloderaria-labelledbytauchen inlabelsnicht auf. Für eine vollständige Barrierefreiheits-Prüfung musst du diese Attribute zusätzlich berücksichtigen. - Dokumentbezug: Die Verknüpfung über
forgreift nur im selben Dokument bzw. im selben Shadow-Root. Liegt ein Label in einem anderen Baum, ist die Liste leer. - Schreibgeschützt:
meter.labels = …wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode einenTypeErroraus. - Kompatibilität: Wird in allen aktuellen Browsern unterstützt. Firefox bietet die Eigenschaft erst ab Version 56, Internet Explorer gar nicht. Im Zweifel prüfst du vorher mit
'labels' in meter.