HTMLModElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLModElement extends HTMLElement

Beschreibung

Das Interface HTMLModElement steht für die HTML-Elemente <del> (gelöschter Text) und <ins> (eingefügter Text). Es erbt alle Methoden und Eigenschaften von HTMLElement und ergänzt zwei eigene Eigenschaften, die Metadaten zu einer Änderung beschreiben.

cite (string): spiegelt das HTML-Attribut cite wider – eine URL zu einem Dokument, das die Änderung erklärt (z. B. ein Ticket, Protokoll oder Changelog). Beim Lesen liefert der Browser die aufgelöste, absolute URL.
dateTime (string): spiegelt das HTML-Attribut datetime wider – Datum und ggf. Uhrzeit der Änderung als gültiger Datums-/Zeit-String, z. B. 2024-03-15T10:30:00Z.

Du verwendest HTMLModElement, wenn du Änderungsverläufe in Dokumenten per Skript auswertest oder erzeugst – etwa in Wikis, Vertragsentwürfen, Preisänderungen („statt 49 € jetzt 39 €“) oder Diff-Ansichten. Einen eigenen Konstruktor gibt es nicht; Instanzen entstehen über document.createElement('del') bzw. 'ins' oder durch den HTML-Parser.

Beachte: Die Eigenschaft heißt in JavaScript dateTime (Camel-Case), das Attribut in HTML aber datetime. Der Wert wird nicht validiert – ungültige Datumsangaben werden unverändert gespeichert.

Rückgabewert

Typ

HTMLModElement

Beschreibung

Instanz für ein <del>- oder <ins>-Element, z. B. von document.createElement('ins') oder querySelector('del').

Beispiele

Änderungs-Elemente erzeugen (Preisänderung)

// Alten Preis als gelöscht, neuen als eingefügt markieren
const price = document.querySelector('#preis');

const del = document.createElement('del');
del.textContent = '49,00 €';
del.dateTime = '2024-03-01';

const ins = document.createElement('ins');
ins.textContent = '39,00 €';
ins.dateTime = '2024-03-01';
ins.cite = '/aktionen/fruehling-2024';

price.replaceChildren(del, ' ', ins);

console.log(ins instanceof HTMLModElement);
console.log(ins.outerHTML);

true <ins datetime="2024-03-01" cite="/aktionen/fruehling-2024">39,00 €</ins>

Änderungsprotokoll aus dem Dokument auslesen

// HTML: <p>Frist: <del datetime="2024-01-10" cite="https://example.com/t/12">30 Tage</del>
//        <ins datetime="2024-01-10">14 Tage</ins></p>
const changes = [...document.querySelectorAll('del, ins')].map((el) => ({
  typ: el.tagName === 'DEL' ? 'gelöscht' : 'eingefügt',
  text: el.textContent.trim(),
  datum: el.dateTime || '(unbekannt)',
  quelle: el.cite || '(keine)'
}));

console.table(changes);

Änderungen nach Datum filtern und hervorheben

const since = new Date('2024-02-01');

for (const el of document.querySelectorAll('ins, del')) {
  const date = new Date(el.dateTime);
  // Ungültige oder fehlende Datumsangaben überspringen
  if (Number.isNaN(date.getTime())) continue;
  if (date >= since) {
    el.classList.add('neu');
    el.title = `Geändert am ${date.toLocaleDateString('de-DE')}`;
  }
}

// Wichtig · Fallstricke

Kein eigener Konstruktor: new HTMLModElement() wirft einen TypeError („Illegal constructor“). Nutze document.createElement('del'|'ins').
cite wird aufgelöst: Beim Lesen liefert el.cite die absolute URL (relativ zur Basis-URL des Dokuments), el.getAttribute('cite') dagegen den Rohwert.
Keine Validierung von dateTime: Der Browser prüft das Format nicht. Beim Parsen mit new Date() auf NaN prüfen.
Barrierefreiheit: Viele Screenreader kündigen <del>/<ins> standardmäßig nicht an. Bei wichtigen Änderungen zusätzlich sichtbaren oder versteckten Hinweistext ergänzen (z. B. per CSS ::before mit content).
Kompatibilität: Wird von allen modernen Browsern seit vielen Jahren unterstützt; cite und dateTime haben keine sichtbare Wirkung auf die Darstellung.

Siehe auch

HTMLDivElement HTMLMapElement HTMLBodyElement HTMLBRElement HTMLElement