MathMLElement.dataset — Eigenschaft · JavaScript-Referenz

Signatur

MathMLElement.dataset

Beschreibung

Die Eigenschaft dataset gibt für ein MathML-Element (z. B. <math>, <mi>, <mfrac>) ein DOMStringMap-Objekt zurück. Darüber lassen sich benutzerdefinierte Datenattribute der Form data-* lesen, setzen und löschen, ohne mit getAttribute()/setAttribute() arbeiten zu müssen. Sie funktioniert genauso wie HTMLElement.dataset und SVGElement.dataset.

Die Attributnamen werden dabei automatisch umgewandelt: Aus data-formel-id wird der Schlüssel formelId (kebab-case → camelCase). Umgekehrt erzeugt eine Zuweisung an el.dataset.schrittNummer das Attribut data-schritt-nummer. Alle Werte sind immer Strings.

Typische Einsatzfälle sind Formel-Editoren, interaktive Mathematik-Lernseiten oder Renderer, die an einzelnen Termen Metadaten (IDs, Schritt-Nummern, Variablennamen, Tooltips) ablegen und später per JavaScript auswerten.

„Schreibgeschützt“ bezieht sich nur auf die Eigenschaft selbst: Man kann dataset kein neues Objekt zuweisen, die einzelnen Einträge darin sind aber frei veränderbar.

Rückgabewert

Typ

DOMStringMap

Beschreibung

Ein lebendes Objekt, dessen Schlüssel die camelCase-Namen der data-*-Attribute und dessen Werte deren String-Inhalte sind. Änderungen wirken sich sofort auf das DOM aus.

Beispiele

Datenattribute eines MathML-Terms auslesen

// HTML: <math><mi id="var-x" data-variable="x" data-einheit-si="m">x</mi></math>
const mi = document.getElementById('var-x');

console.log(mi instanceof MathMLElement);
console.log(mi.dataset.variable);
console.log(mi.dataset.einheitSi);
console.log({ ...mi.dataset });

true x m { variable: 'x', einheitSi: 'm' }

Werte setzen und löschen

const bruch = document.querySelector('math mfrac');

// Erzeugt data-schritt-nummer="3"
bruch.dataset.schrittNummer = 3;
console.log(bruch.getAttribute('data-schritt-nummer'));
console.log(typeof bruch.dataset.schrittNummer);

// Attribut entfernen
delete bruch.dataset.schrittNummer;
console.log(bruch.hasAttribute('data-schritt-nummer'));

3 string false

Interaktive Formel: Klick auf Terme auswerten

// HTML: <math id="formel"><mi data-erklaerung="Masse">m</mi><mo>·</mo><msup data-erklaerung="Lichtgeschwindigkeit zum Quadrat"><mi>c</mi><mn>2</mn></msup></math>
const formel = document.getElementById('formel');

formel.addEventListener('click', (event) => {
  const term = event.target.closest('[data-erklaerung]');
  if (!term) return;
  term.dataset.aktiv = 'true';
  console.log(`Erklärung: ${term.dataset.erklaerung}`);
});

Erklärung: Masse (nach Klick auf m)

Zahlenwerte korrekt umwandeln

const mn = document.createElementNS('http://www.w3.org/1998/Math/MathML', 'mn');
mn.textContent = '42';
mn.dataset.gewichtung = '0.5';

const gewicht = Number(mn.dataset.gewichtung);
console.log(gewicht * 2);
console.log('gewichtung' in mn.dataset);

1 true

// Wichtig · Fallstricke

Nur Strings: Zugewiesene Werte werden in Strings umgewandelt (3 → "3", null → "null"). Zahlen und Booleans müssen beim Lesen selbst umgewandelt werden, z. B. mit Number() oder === 'true'.
Namensumwandlung: Bindestriche gefolgt von Kleinbuchstaben werden zu Großbuchstaben. Schlüssel mit Bindestrich + Kleinbuchstabe (dataset['a-b']) lösen einen SyntaxError aus. Großbuchstaben im HTML-Attributnamen werden kleingeschrieben.
Namensraum: Mit document.createElement('mi') erzeugte Elemente sind keine MathML-Elemente, sondern HTMLUnknownElement. Für echte MathML-Elemente document.createElementNS('http://www.w3.org/1998/Math/MathML', …) verwenden.
Kompatibilität: MathMLElement und damit dataset auf MathML-Elementen gibt es in Chromium erst ab Version 109 und in Safari ab 16.4; ältere Browser liefern undefined. Als Rückfall funktioniert getAttribute('data-…') überall.
Sicherheit: Werte aus data-*-Attributen stammen aus dem Markup und sind nicht vertrauenswürdig – nie ungeprüft über innerHTML einfügen, sondern textContent verwenden.

Siehe auch

MathMLElement HTMLElement.dataset SVGElement.dataset DOMStringMap Element.getAttribute() Element.setAttribute() HTMLTableElement.tBodies