HTMLModElement.cite — Eigenschaft · JavaScript-Referenz

Signatur

HTMLModElement.cite

Beschreibung

Die Eigenschaft cite des Interfaces HTMLModElement spiegelt das HTML-Attribut cite der Elemente <ins> und <del> wider. Sie enthält eine URL auf ein Dokument, das die Änderung begründet oder erläutert, zum Beispiel ein Ticket, einen Commit, ein Sitzungsprotokoll oder einen Änderungsvermerk.

Beim Lesen gibt der Browser die URL aufgelöst zurück, also relativ zur Basis-URL des Dokuments (document.baseURI) als absolute URL. Fehlt das Attribut, ist das Ergebnis ein leerer String. Beim Schreiben wird der zugewiesene String unverändert ins Attribut cite übernommen.

Typische Anwendungsfälle sind Änderungsverläufe in Rechtstexten, Wikis oder Dokumentationen: Per Skript lassen sich alle Änderungen samt Begründungslink einsammeln, als Tooltip oder Fußnote darstellen oder beim Anlegen neuer Änderungen automatisch mit einer Quelle versehen. Browser zeigen cite selbst nicht an, das Attribut ist reine Metainformation für Maschinen und Skripte.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: die URL (absolut oder relativ), die ins Attribut `cite` geschrieben wird.

Rückgabewert

Typ

string

Beschreibung

Die zur Basis-URL des Dokuments aufgelöste, absolute URL aus dem Attribut cite, oder ein leerer String, wenn das Attribut fehlt.

Beispiele

cite auslesen (relative URL wird aufgelöst)

// HTML: <del id="alt" cite="/changelog#v2">Version 1.0</del>
// Seite liegt unter https://example.com/docs/
const del = document.getElementById('alt');

console.log(del.cite);                  // aufgelöste URL
console.log(del.getAttribute('cite'));  // Rohwert aus dem Markup

https://example.com/changelog#v2 /changelog#v2

Neue Änderung mit Begründungslink erzeugen

const markiereEinfuegung = (text, ticketId) => {
  const ins = document.createElement('ins');
  ins.textContent = text;
  ins.cite = `https://tracker.example.com/issues/${ticketId}`;
  ins.dateTime = new Date().toISOString();
  return ins;
};

const absatz = document.querySelector('p');
absatz.append(' ', markiereEinfuegung('ab sofort auch per API verfügbar', 482));
console.log(absatz.lastElementChild.outerHTML);

<ins cite="https://tracker.example.com/issues/482" datetime="2024-05-01T10:00:00.000Z">ab sofort auch per API verfügbar</ins>

Begründungslinks als Fußnoten sichtbar machen

// Alle <ins>/<del> mit cite um einen klickbaren Quellenlink ergänzen
document.querySelectorAll('ins[cite], del[cite]').forEach((el, i) => {
  const link = document.createElement('a');
  link.href = el.cite;          // bereits absolute URL
  link.textContent = `[${i + 1}]`;
  link.title = el.tagName === 'INS' ? 'Grund der Einfügung' : 'Grund der Löschung';
  el.after(link);
});

// Wichtig · Fallstricke

Aufgelöst oder roh: el.cite liefert immer die absolute URL. Wenn du den Wert genau so brauchst, wie er im Markup steht, nimm el.getAttribute('cite').
Fehlendes Attribut: Ohne cite-Attribut ist der Rückgabewert ein leerer String, nicht null. Prüfe daher mit el.hasAttribute('cite').
Keine Prüfung: Der Browser prüft nicht, ob die URL gültig oder erreichbar ist. Ungültige Werte werden beim Lesen unter Umständen unverändert zurückgegeben.
Sicherheit: Wenn du cite-Werte aus Nutzereingaben in href übernimmst, prüfe das Schema (z. B. nur https:). Sonst können javascript:-URLs eingeschleust werden (XSS).
Nicht verwechseln: <blockquote> und <q> haben ebenfalls ein cite-Attribut, gehören aber zu HTMLQuoteElement.
Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

FetchLaterResult.activated HTMLLinkElement.sizes HTMLModElement.dateTime HTMLQuoteElement.cite HTMLElement.title