MathMLElement — Schnittstelle · JavaScript-Referenz

Signatur

interface MathMLElement extends Element

Beschreibung

MathMLElement ist die gemeinsame DOM-Schnittstelle für alle Elemente im MathML-Namensraum http://www.w3.org/1998/Math/MathML. Wenn der Browser ein Element wie <math>, <mrow>, <msup> oder <mn> einliest, entsteht ein Objekt vom Typ MathMLElement. Anders als bei HTML gibt es keine eigenen Unterklassen für einzelne Tags. Alle MathML-Elemente teilen sich dieses eine Interface.

Das Interface erbt alles von Element, Node und EventTarget. Dazu kommen die gleichen Mixins wie bei HTMLElement und SVGElement:

ElementCSSInlineStyle: style und attributeStyleMap für Inline-Styles.
HTMLOrForeignElement: dataset, tabIndex, autofocus, nonce sowie focus() und blur().
GlobalEventHandlers: alle on…-Eigenschaften wie onclick und onfocus.

Sie brauchen MathMLElement, wenn Sie Formeln per Skript erzeugen, verändern oder auswerten, etwa in Lernplattformen, in Formel-Editoren oder wenn Sie Berechnungsergebnisse live als mathematische Notation anzeigen. Mit instanceof MathMLElement können Sie außerdem prüfen, ob ein Knoten zum MathML-Namensraum gehört.

Rückgabewert

Typ

MathMLElement

Beschreibung

Instanzen entstehen beim Einlesen von MathML-Markup oder über document.createElementNS("http://www.w3.org/1998/Math/MathML", tagName). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Bruch dynamisch per createElementNS erzeugen

const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';

// Hilfsfunktion: MathML-Element mit Kindern oder Text erzeugen
const m = (tag, ...children) => {
  const el = document.createElementNS(MATHML_NS, tag);
  for (const child of children) {
    el.append(typeof child === 'string' ? document.createTextNode(child) : child);
  }
  return el;
};

// Ergibt: a / (b + 1)
const formel = m('math',
  m('mfrac',
    m('mi', 'a'),
    m('mrow', m('mi', 'b'), m('mo', '+'), m('mn', '1'))
  )
);
formel.setAttribute('display', 'block');
document.body.append(formel);

console.log(formel instanceof MathMLElement);
console.log(formel.namespaceURI);

true http://www.w3.org/1998/Math/MathML

MathML-Elemente per instanceof erkennen und einfärben

document.body.insertAdjacentHTML('beforeend', `
  <math><msup><mi>x</mi><mn>2</mn></msup></math>
  <p>Normaler Absatz</p>
`);

for (const el of document.body.querySelectorAll('*')) {
  if (el instanceof MathMLElement) {
    // style kommt aus ElementCSSInlineStyle
    el.style.color = 'darkblue';
  }
}

const sup = document.querySelector('msup');
console.log(sup.constructor.name, sup.tagName);

MathMLElement msup

Interaktive Formel mit dataset, tabIndex und Events

const mi = document.createElementNS('http://www.w3.org/1998/Math/MathML', 'mi');
mi.textContent = 'n';
mi.dataset.variable = 'anzahl'; // aus HTMLOrForeignElement
mi.tabIndex = 0;                // per Tastatur fokussierbar

const math = document.createElementNS('http://www.w3.org/1998/Math/MathML', 'math');
math.append(mi);
document.body.append(math);

const zeigeInfo = () => console.log(`Variable: ${mi.dataset.variable}`);
mi.addEventListener('click', zeigeInfo);
mi.onfocus = () => console.log('fokussiert');

mi.focus();
mi.click();

// Listener wieder entfernen
mi.removeEventListener('click', zeigeInfo);
mi.onfocus = null;

fokussiert Variable: anzahl

// Wichtig · Fallstricke

Kein Konstruktor: new MathMLElement() wirft einen TypeError („Illegal constructor“). Erzeugen Sie Elemente immer mit document.createElementNS() und dem MathML-Namensraum.
Namensraum beachten: document.createElement('mfrac') erzeugt ein HTMLUnknownElement und kein MathML-Element. Es wird deshalb nicht als Formel dargestellt. Nur der HTML-Parser (innerHTML, insertAdjacentHTML) ordnet Tags innerhalb von <math> automatisch dem MathML-Namensraum zu.
Browser-Kompatibilität: Firefox und Safari stellen MathML schon lange dar. Das Interface MathMLElement selbst gibt es in Firefox seit Version 71. Chromium-Browser unterstützen MathML Core erst seit Version 109 (Januar 2023). In älteren Umgebungen kann MathMLElement ganz fehlen. Prüfen Sie das mit typeof MathMLElement !== 'undefined'.
MathML Core statt MathML 3: Browser setzen nur die Teilmenge MathML Core um. Veraltete Elemente und Attribute wie <mfenced>, <semantics>-Varianten oder mathcolor werden teilweise ignoriert. Verwenden Sie stattdessen CSS.
Sicherheit: MathML-Markup aus Nutzereingaben kann über innerHTML genauso Skripte oder Links einschleusen wie HTML (XSS), zum Beispiel über href-Attribute oder eingebettetes HTML in <annotation-xml>. Bereinigen Sie solche Eingaben mit einem Sanitizer (z. B. DOMPurify) oder bauen Sie die Formel per DOM-API auf.

Siehe auch

Element HTMLElement HTMLBRElement HTMLHRElement HTMLHtmlElement