Signatur
Beschreibung
Die schreibgeschützte Eigenschaft relList eines HTMLAnchorElement gibt eine live DOMTokenList zurück. Sie enthält die einzelnen Linktypen aus dem rel-Attribut, also die Beziehung zwischen dem aktuellen Dokument und dem Linkziel, z. B. noopener, noreferrer, nofollow oder external.
Im Gegensatz zur Eigenschaft rel, die nur den rohen Attribut-String liefert, lassen sich mit relList einzelne Werte gezielt prüfen, hinzufügen, entfernen oder umschalten, ohne dass man selbst Strings zerlegt und wieder zusammensetzt. Die Methoden entsprechen denen von classList: add(), remove(), toggle(), replace(), contains() und supports().
„Live“ heißt: Änderungen an der Liste schreiben sich sofort ins rel-Attribut zurück, und Änderungen am Attribut (z. B. über setAttribute('rel', …)) erscheinen sofort in der Liste. Die Eigenschaft selbst ist schreibgeschützt, eine Zuweisung von Strings wird aber in den meisten Browsern an rel weitergereicht ([PutForwards=value]).
Typische Anwendungsfälle sind das nachträgliche Absichern externer Links mit noopener noreferrer, das Markieren von Affiliate-Links mit sponsored oder das Auswerten von Linktypen für eigene Navigationslogik.
Rückgabewert
DOMTokenList mit den durch Leerzeichen getrennten Linktypen des rel-Attributs. Ist kein rel gesetzt, ist die Liste leer (length === 0).Beispiele
Linktypen auslesen und prüfen
// <a id="doku" href="https://example.com" rel="noopener external">Doku</a>
const link = document.getElementById('doku');
console.log(link.relList.length);
console.log([...link.relList]);
console.log(link.relList.contains('noopener'));
console.log(link.relList.contains('nofollow'));Alle externen Links absichern
const sichereExterneLinks = () => {
const links = document.querySelectorAll('a[href]');
for (const a of links) {
// Nur Links auf fremde Hosts
if (a.host && a.host !== location.host) {
a.relList.add('noopener', 'noreferrer');
if (!a.target) a.target = '_blank';
}
}
};
sichereExterneLinks();
console.log(document.querySelector('a[target="_blank"]')?.rel);Linktypen umschalten, ersetzen und entfernen
const a = document.createElement('a');
a.href = 'https://shop.example.com/produkt';
a.rel = 'nofollow';
a.relList.replace('nofollow', 'sponsored');
a.relList.toggle('noopener'); // hinzufügen
console.log(a.rel);
a.relList.toggle('noopener'); // wieder entfernen
a.relList.remove('sponsored');
console.log(a.rel === '', a.relList.length);Live-Verhalten zwischen Attribut und Liste
const a = document.createElement('a');
const liste = a.relList; // Referenz einmal holen
a.setAttribute('rel', 'prev help');
console.log(liste.length, liste.value);
liste.add('author');
console.log(a.getAttribute('rel'));// Wichtig · Fallstricke
- Schreibgeschützt:
relListkann nicht durch ein anderes Objekt ersetzt werden.a.relList = 'noopener'wird anrelweitergeleitet – für klaren Code besser direkta.relsetzen. supports()ist bei<a>nicht aussagekräftig: Für Anker gibt es keine definierte Menge unterstützter Tokens,a.relList.supports('noopener')wirft einenTypeError. Zur Feature-Erkennung (z. B.preload) eignet sichdocument.createElement('link').relList.supports(...).- Groß-/Kleinschreibung:
contains()vergleicht exakt.rel=\"NoOpener\"wirkt im Browser zwar alsnoopener,contains('noopener')liefert jedochfalse. - Tokens mit Leerzeichen oder leere Strings führen bei
add()/remove()zuInvalidCharacterErrorbzw.SyntaxError. - Sicherheit: Moderne Browser setzen bei
target=\"_blank\"implizitnoopener. Für ältere Browser und zum Schutz vor Referrer-Leaks sollte mannoopener noreferrertrotzdem explizit ergänzen (Schutz vor „Reverse Tabnabbing“). - Kompatibilität: In allen aktuellen Browsern verfügbar; Internet Explorer unterstützt
relListan<a>nicht – dort als Ausweichlösung dasrel-Attribut als String bearbeiten.