SVGAElement.relList — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.relList

Beschreibung

Die schreibgeschützte Eigenschaft relList eines SVGAElement liefert eine live DOMTokenList, die das rel-Attribut des SVG-Links widerspiegelt. Das rel-Attribut beschreibt die Beziehung zwischen dem aktuellen Dokument und dem Linkziel, z. B. noopener, noreferrer, nofollow oder external.

Statt den Attributwert als Zeichenkette mühsam zu zerlegen und wieder zusammenzusetzen, lassen sich einzelne Werte bequem mit add(), remove(), toggle(), replace() und contains() bearbeiten. Jede Änderung an der Liste wird sofort ins rel-Attribut zurückgeschrieben – und umgekehrt spiegelt die Liste Änderungen per setAttribute('rel', …) sofort wider.

Typischer Einsatz: in interaktiven SVG-Grafiken (Diagramme, Karten, Infografiken) werden Links auf externe Seiten nachträglich abgesichert, indem man noopener noreferrer ergänzt, oder man prüft mit contains(), wie ein Link behandelt werden soll. Die Eigenschaft selbst ist schreibgeschützt; eine Zuweisung einer Zeichenkette an relList wird (wie bei classList) an relList.value bzw. das rel-Attribut weitergeleitet.

Rückgabewert

Typ

DOMTokenList

Beschreibung

Eine live aktualisierte DOMTokenList mit allen Tokens des rel-Attributs. Ist das Attribut nicht gesetzt, ist die Liste leer (length === 0).

Beispiele

rel-Werte eines SVG-Links auslesen

// <svg><a id="link" href="https://example.com" rel="external nofollow"><text x="10" y="20">Beispiel</text></a></svg>
const link = document.querySelector('svg a#link');

console.log(link.relList.length);
for (const token of link.relList) {
  console.log(token);
}
console.log(link.relList.contains('nofollow'));

2 external nofollow true

Externe SVG-Links absichern

// Alle SVG-Links mit target="_blank" um noopener/noreferrer ergänzen
document.querySelectorAll('svg a[target="_blank"]').forEach((a) => {
  a.relList.add('noopener', 'noreferrer');
});

const first = document.querySelector('svg a[target="_blank"]');
console.log(first?.getAttribute('rel'));

noopener noreferrer

Live-Verhalten und toggle()/replace()

const svgNS = 'http://www.w3.org/2000/svg';
const a = document.createElementNS(svgNS, 'a');
a.setAttribute('href', '/hilfe');

const rel = a.relList;          // Referenz einmal holen
a.setAttribute('rel', 'help');
console.log(rel.value);         // live aktualisiert

rel.toggle('nofollow');         // hinzufügen
rel.replace('help', 'author');
console.log(a.getAttribute('rel'));

help author nofollow

// Wichtig · Fallstricke

Kompatibilität: SVGAElement.relList ist erst seit Ende 2022 in allen großen Browsern verfügbar (Chrome/Edge 108, Firefox 107, Safari 16). In älteren Browsern ist die Eigenschaft undefined – dann auf getAttribute('rel')/setAttribute('rel', …) ausweichen: if ('relList' in SVGAElement.prototype) { … }.
SVG-Elemente müssen mit document.createElementNS('http://www.w3.org/2000/svg', 'a') erzeugt werden; document.createElement('a') liefert ein HTMLAnchorElement, kein SVGAElement.
Anders als bei HTML-<link> kennt relList.supports() hier keine definierte Liste unterstützter Tokens – der Aufruf kann einen TypeError werfen. Nicht zur Feature-Erkennung verwenden.
Tokens dürfen keine Leerzeichen enthalten; add('a b') wirft einen InvalidCharacterError, ein leerer String einen SyntaxError. Doppelte Tokens werden automatisch entfernt.
Sicherheit: Bei Links mit target="_blank" auf fremde Seiten noopener setzen, damit die Zielseite keinen Zugriff auf window.opener erhält (moderne Browser tun dies implizit, ältere nicht).

Siehe auch

SVGAElement DOMTokenList HTMLAnchorElement.relList Element.classList SVGAElement.target Element.setAttribute() HTMLTrackElement.default