HTMLQuoteElement.cite — Eigenschaft · JavaScript-Referenz

Signatur

HTMLQuoteElement.cite

Beschreibung

Die Eigenschaft cite des Interfaces HTMLQuoteElement spiegelt das gleichnamige HTML-Attribut der Elemente <blockquote> und <q> wider. Sie enthält eine URL, die auf die Quelle des Zitats verweist, etwa einen Artikel, ein Dokument oder einen bestimmten Abschnitt darin.

Beim Lesen gibt die Eigenschaft die URL aufgelöst zurück: Ein relativer Wert wie /artikel/42 wird bezogen auf die Basis-URL des Dokuments zu einer absoluten URL (z. B. https://example.com/artikel/42). Fehlt das Attribut, ist der Wert ein leerer String. Den rohen Attributwert erhalten Sie mit getAttribute('cite').

Beim Schreiben wird das Attribut cite im DOM gesetzt. Browser zeigen diese Quelle normalerweise nicht an. Sie dient vor allem als maschinenlesbare Metainformation für Suchmaschinen, Hilfstechnologien oder eigene Skripte, die zum Beispiel automatisch einen sichtbaren Quellenlink einfügen.

Rückgabewert

Typ

string

Beschreibung

Die absolute, aufgelöste URL der Zitatquelle oder "", wenn das Attribut cite fehlt. Beim Zuweisen wird der String als Attributwert übernommen.

Beispiele

Quelle eines Blockzitats auslesen

// HTML: <blockquote id="zitat" cite="/artikel/42">Wissen ist Macht.</blockquote>
const zitat = document.getElementById('zitat');

console.log(zitat.cite);                 // aufgelöste URL
console.log(zitat.getAttribute('cite')); // Rohwert

https://example.com/artikel/42 /artikel/42

Sichtbare Quellenlinks automatisch erzeugen

// Unter jedes <blockquote> mit cite-Attribut einen Quellenlink setzen
document.querySelectorAll('blockquote[cite]').forEach((bq) => {
  const link = document.createElement('a');
  link.href = bq.cite;
  link.textContent = `Quelle: ${new URL(bq.cite).hostname}`;
  link.rel = 'noopener noreferrer';

  const footer = document.createElement('footer');
  footer.append(link);
  bq.append(footer);
});

Zitat dynamisch erstellen und Quelle setzen

const q = document.createElement('q');
q.textContent = 'Das Web ist für alle da.';
q.cite = 'https://www.w3.org/about/';

document.body.append(q);
console.log(q.outerHTML);

// Wichtig · Fallstricke

Keine sichtbare Anzeige: Browser blenden die cite-URL nicht ein. Wenn Nutzer die Quelle sehen sollen, müssen Sie einen Link oder ein <cite>-Element selbst einfügen.
Aufgelöste und rohe URL: element.cite liefert eine absolute URL, getAttribute('cite') dagegen den Originalwert. Das ist wichtig, wenn Sie Werte vergleichen.
Nicht verwechseln: Das HTML-Element <cite> (Titel eines Werks) ist etwas anderes als das Attribut cite. Das Element wird durch HTMLElement abgebildet, nicht durch HTMLQuoteElement.
Sicherheit: Stammt der Wert aus Nutzereingaben, prüfen Sie das Schema, bevor Sie ihn als href verwenden (z. B. mit new URL() und nur http:/https: zulassen). Sonst kann eine javascript:-URL zu XSS führen.
Kompatibilität: Die Eigenschaft wird seit Langem von allen gängigen Browsern unterstützt.

Siehe auch

HTMLModElement.cite HTMLAreaElement.ping HTMLMetaElement.scheme HTMLFontElement.size HTMLSlotElement.name