HTMLDataElement.value — Eigenschaft · JavaScript-Referenz

Signatur

HTMLDataElement.value

Beschreibung

Das Element <data> verknüpft einen für Menschen lesbaren Inhalt (z. B. „Kaffeebohnen, 1 kg“) mit einem maschinenlesbaren Wert (z. B. einer Artikelnummer oder einem Zahlenwert). Die Eigenschaft HTMLDataElement.value gibt Zugriff auf diesen maschinenlesbaren Wert: Sie spiegelt das HTML-Attribut value direkt wider.

Beim Lesen erhält man immer einen string – auch wenn der Wert eine Zahl darstellt. Ist das Attribut nicht gesetzt, wird ein leerer String "" zurückgegeben. Beim Schreiben wird der zugewiesene Wert in einen String umgewandelt und als Attribut value ins DOM geschrieben; el.value = 42 ist also gleichbedeutend mit el.setAttribute("value", "42").

Typische Einsatzfälle sind das Sortieren oder Filtern von Listen und Tabellen anhand technischer Werte (Preise, IDs, Messwerte), während die Anzeige lokalisiert oder formatiert bleibt. So lässt sich Logik sauber von der Darstellung trennen, ohne auf eigene data-*-Attribute ausweichen zu müssen.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs value; "", wenn das Attribut fehlt. Zugewiesene Werte werden in Strings umgewandelt.

Beispiele

Maschinenlesbaren Wert auslesen

// HTML: <data id="produkt" value="A-1042">Kaffeebohnen, 1 kg</data>
const el = document.getElementById('produkt');
console.log(el.value);       // maschinenlesbar
console.log(el.textContent); // für Menschen

A-1042 Kaffeebohnen, 1 kg

Wert setzen – Attribut wird aktualisiert

const el = document.createElement('data');
el.textContent = 'Zwölf Euro';
el.value = 12; // wird zu "12" umgewandelt

console.log(typeof el.value);           
console.log(el.getAttribute('value'));
console.log(el.outerHTML);

string 12 <data value="12">Zwölf Euro</data>

Preisliste nach numerischem Wert sortieren

// HTML:
// <ul id="preise">
//   <li><data value="19.9">19,90 €</data></li>
//   <li><data value="4.5">4,50 €</data></li>
//   <li><data value="120">120,00 €</data></li>
// </ul>
const liste = document.getElementById('preise');
const eintraege = [...liste.querySelectorAll('li')];

eintraege
  .sort((a, b) =>
    Number(a.querySelector('data').value) -
    Number(b.querySelector('data').value))
  .forEach((li) => liste.append(li));

console.log(eintraege.map((li) => li.textContent).join(' | '));

4,50 € | 19,90 € | 120,00 €

Fehlendes Attribut erkennen

const el = document.createElement('data');
console.log(JSON.stringify(el.value));
console.log(el.hasAttribute('value'));

"" false

// Wichtig · Fallstricke

Immer String: Der Rückgabewert ist nie eine Zahl. Zum Rechnen oder numerischen Sortieren explizit mit Number() oder parseFloat() umwandeln – sonst sortiert "120" < "19.9" lexikografisch falsch.
Dezimaltrennzeichen: Im Attribut sollte ein maschinenlesbares Format (Punkt als Dezimaltrenner) stehen, die lokalisierte Darstellung gehört in den Textinhalt.
Nicht mit <time> verwechseln: Für Datums- und Zeitangaben ist <time datetime="…"> das passende Element.
Kein Formularfeld: Anders als bei <input> gibt es keinen getrennten „aktuellen“ und „Standard“-Wert; value ist reine Attributspiegelung und wird nicht mit Formularen übermittelt.
Kompatibilität: In allen aktuellen Browsern verfügbar (Chrome/Edge 62+, Firefox 22+, Safari 10+). In sehr alten Browsern existiert HTMLDataElement nicht – dort hilft getAttribute('value') als Rückfalllösung.

Siehe auch

CSSMathProduct.values HTMLLIElement.value HTMLMeterElement.value HTMLButtonElement.value HTMLInputElement.value