HTMLDataElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLDataElement extends HTMLElement

Beschreibung

Das Interface HTMLDataElement steht für das HTML-Element <data>. Dieses Element verknüpft einen für Menschen lesbaren Inhalt (z. B. „Kleine Bio-Äpfel“) mit einem maschinenlesbaren Wert (z. B. eine Artikelnummer oder ein numerischer Preis). Zusätzlich zu allen Eigenschaften und Methoden von HTMLElement bietet es genau eine eigene Eigenschaft: value.

HTMLDataElement.value spiegelt das HTML-Attribut value wider – Lesen liefert immer einen string, Schreiben setzt das Attribut. Nützlich ist das, wenn Skripte Tabellen oder Listen sortieren, filtern oder auswerten sollen, ohne den angezeigten Text parsen zu müssen: Der sichtbare Text darf formatiert sein („1.299,00 €“), der Wert bleibt eindeutig („1299“).

Für Datums- und Zeitangaben ist nicht <data>, sondern <time> (HTMLTimeElement) vorgesehen. Für beliebige, nicht sichtbare Zusatzdaten eignen sich dagegen data-*-Attribute mit dataset – das <data>-Element hat damit nichts zu tun.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Instanz-Eigenschaft (kein Konstruktor-Parameter): spiegelt das `value`-Attribut des `<data>`-Elements, lesbar und schreibbar.

Rückgabewert

Typ

HTMLDataElement

Beschreibung

Instanzen entstehen über document.createElement("data") oder durch Abfrage vorhandener <data>-Elemente im DOM; einen direkt aufrufbaren Konstruktor gibt es nicht.

Beispiele

Element erzeugen und Wert setzen

const produkt = document.createElement('data');
produkt.value = 'SKU-48213';
produkt.textContent = 'Kleine Bio-Äpfel';
document.body.append(produkt);

console.log(produkt instanceof HTMLDataElement);
console.log(produkt.outerHTML);

true <data value="SKU-48213">Kleine Bio-Äpfel</data>

Preisliste nach maschinenlesbarem Wert sortieren

// HTML:
// <ul id="preise">
//   <li><data value="1299">1.299,00 €</data></li>
//   <li><data value="49.9">49,90 €</data></li>
//   <li><data value="320">320,00 €</data></li>
// </ul>
const liste = document.querySelector('#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));

["49,90 €", "320,00 €", "1.299,00 €"]

Summe aller Werte berechnen

// HTML: <data value="3">drei</data> <data value="4.5">viereinhalb</data>
const summe = [...document.querySelectorAll('data')]
  .map((el) => parseFloat(el.value))
  .filter(Number.isFinite)
  .reduce((acc, n) => acc + n, 0);

console.log(summe);

7.5

// Wichtig · Fallstricke

value ist immer ein string – für Berechnungen explizit mit Number() oder parseFloat() umwandeln, sonst verkettet + Zeichenketten.
Fehlt das Attribut, liefert value einen leeren String (nicht null); Number(\"\") ergibt 0 – fehlende Werte daher vorher prüfen.
Nicht mit data-*-Attributen bzw. HTMLElement.dataset verwechseln.
Für Datums-/Zeitwerte <time datetime> verwenden.
Kompatibilität: in allen modernen Browsern unterstützt (Safari ab 10, Edge ab 14); der Internet Explorer kennt das Interface nicht – dort ist das Element ein HTMLUnknownElement, getAttribute('value') funktioniert aber trotzdem.

Siehe auch

HTMLDataListElement HTMLQuoteElement HTMLMetaElement HTMLAreaElement HTMLBaseElement