HTMLQuoteElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLQuoteElement extends HTMLElement

Beschreibung

Das Interface HTMLQuoteElement ist die DOM-Schnittstelle für die beiden HTML-Zitat-Elemente <blockquote> (Blockzitat) und <q> (Inline-Zitat). Es erbt alle Eigenschaften und Methoden von HTMLElement, Element, Node und EventTarget und ergänzt diese um genau eine eigene Eigenschaft: cite.

Die Eigenschaft cite spiegelt das gleichnamige HTML-Attribut wider und enthält eine URL, die auf die Quelle des Zitats verweist, z. B. einen Artikel oder ein Dokument. Beim Lesen liefert sie die aufgelöste, absolute URL, auch wenn im Attribut eine relative URL steht. Mit getAttribute('cite') bekommt man dagegen den Rohwert.

Praktisch nutzt man das Interface, um Zitate dynamisch zu erzeugen, Quellangaben auszulesen und sichtbar zu machen (Browser zeigen cite normalerweise nicht an) oder um Zitate in Inhalten automatisch zu bearbeiten. Instanzen erzeugt man mit document.createElement('blockquote') bzw. document.createElement('q'). Einen direkten Konstruktoraufruf new HTMLQuoteElement() gibt es nicht.

Parameter

Name	Typ	Default	Beschreibung
$cite	string	""	Eigenschaft (lesen/schreiben): spiegelt das HTML-Attribut `cite` wider. Enthält die URL der Zitatquelle. Beim Lesen wird sie relativ zur Basis-URL des Dokuments aufgelöst.

Rückgabewert

Typ

HTMLQuoteElement

Beschreibung

Instanzen bekommt man über document.createElement('blockquote'), document.createElement('q') oder über DOM-Abfragen wie querySelector.

Beispiele

Blockzitat erzeugen und mit Quelle versehen

const zitat = document.createElement('blockquote');
zitat.cite = 'https://example.com/interview';
zitat.textContent = 'Einfachheit ist die höchste Stufe der Vollendung.';
document.body.append(zitat);

console.log(zitat instanceof HTMLQuoteElement);
console.log(zitat.cite);

true https://example.com/interview

Relative vs. aufgelöste URL

// Annahme: Seite läuft unter https://example.com/blog/
const q = document.createElement('q');
q.setAttribute('cite', '../quellen/rede.html');

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

../quellen/rede.html https://example.com/quellen/rede.html

Quellenangaben automatisch sichtbar machen

document.querySelectorAll('blockquote[cite]').forEach((bq) => {
  const quelle = document.createElement('a');
  quelle.href = bq.cite;
  quelle.textContent = `Quelle: ${new URL(bq.cite).hostname}`;
  quelle.rel = 'noopener noreferrer';

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

// Wichtig · Fallstricke

Zwei Elemente, ein Interface: <blockquote> und <q> teilen sich HTMLQuoteElement. Welches Element man vor sich hat, erkennt man an element.tagName ('BLOCKQUOTE' oder 'Q').
Nicht verwechseln: Das HTML-Element <cite> (Werktitel) ist ein gewöhnliches HTMLElement und hat mit der Eigenschaft cite nichts zu tun.
cite wird nicht angezeigt: Browser stellen das Attribut nicht dar. Soll die Quelle sichtbar sein, muss man sie selbst als Link oder Text einfügen.
Sicherheit: Kommt der cite-Wert aus Benutzereingaben, prüfe das Protokoll (z. B. mit new URL()), bevor du ihn als href verwendest. Sonst sind javascript:-URLs möglich.
Ungültige URLs: Lässt sich der Attributwert nicht als URL auflösen, gibt cite den Rohwert zurück. new URL(bq.cite) kann dann einen TypeError werfen.
Das Interface wird von allen modernen Browsern unterstützt. Ältere Browser hatten dafür teilweise getrennte Interfaces.

Siehe auch

HTMLElement Document.createElement() Element.getAttribute() HTMLAnchorElement HTMLMarqueeElement HTMLSourceElement