HTMLAreaElement.relList — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLAreaElement.relList

Beschreibung

Die schreibgeschützte Eigenschaft relList eines HTMLAreaElement liefert ein dynamisches DOMTokenList-Objekt. Es enthält die Linktypen, die die Beziehung zwischen dem aktuellen Dokument und der vom <area>-Element verlinkten Ressource beschreiben, also etwa noopener, noreferrer, nofollow oder external.

Anders als die Eigenschaft rel, die das Attribut als einfache, durch Leerzeichen getrennte Zeichenkette liefert, bietet relList bequeme Methoden wie add(), remove(), toggle(), contains() und supports(). Damit lassen sich einzelne Linktypen gezielt ändern, ohne die Zeichenkette selbst zu zerlegen und wieder zusammenzusetzen.

Die Liste ist live: Jede Änderung über relList wird sofort in das rel-Attribut übernommen, und jede Änderung am Attribut ist umgekehrt sofort in der Liste zu sehen. Die Eigenschaft selbst ist schreibgeschützt. Weist man ihr aber eine Zeichenkette zu, wird diese in den meisten Browsern an rel weitergereicht ([PutForwards=value]).

Typische Einsatzfälle sind das nachträgliche Absichern von Image-Map-Links zu externen Zielen mit noopener noreferrer sowie das Auswerten von Linktypen, etwa um Tracking oder das Verhalten beim Öffnen zu steuern.

Rückgabewert

Typ

DOMTokenList

Beschreibung

Eine dynamische DOMTokenList mit den Linktypen des rel-Attributs. Ist das Attribut nicht vorhanden, ist die Liste leer (length === 0).

Beispiele

Linktypen einer Image-Map-Fläche auslesen

// HTML: <map name="karte"><area id="shop" shape="rect" coords="0,0,100,100" href="https://example.com" rel="external nofollow" alt="Shop"></map>
const area = document.getElementById('shop');

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

external nofollow 2 true

Externe Flächen nachträglich absichern

// Alle <area>-Links mit fremdem Ziel bekommen noopener und noreferrer
const areas = document.querySelectorAll('area[href]');

areas.forEach((area) => {
  const url = new URL(area.href, location.href);
  if (url.origin !== location.origin) {
    area.relList.add('noopener', 'noreferrer');
    area.target = '_blank';
  }
});

console.log(document.querySelector('area[href^="https://example.com"]')?.rel);

external nofollow noopener noreferrer

Linktyp umschalten und Live-Verhalten prüfen

const area = document.createElement('area');
area.href = '/impressum';
area.alt = 'Impressum';

area.relList.toggle('nofollow');   // hinzufügen
console.log(area.getAttribute('rel'));

area.setAttribute('rel', 'help license');
console.log([...area.relList]);    // Liste wird sofort aktualisiert

area.relList.replace('license', 'author');
console.log(area.rel);

nofollow ["help", "license"] help author

Unterstützung eines Linktyps per supports() prüfen

const area = document.createElement('area');

// supports() prüft, ob der Browser den Linktyp für <area> auswertet
if (area.relList.supports?.('noopener')) {
  console.log('noopener wird unterstützt');
} else {
  console.log('noopener wird nicht unterstützt');
}

noopener wird unterstützt

// Wichtig · Fallstricke

Schreibgeschützt: area.relList = 'a b' ersetzt nicht das Objekt, sondern wird an rel weitergereicht. Aus Gründen der Lesbarkeit ist area.rel = 'a b' vorzuziehen.
Live-Liste: Wer relList durchläuft und dabei Einträge entfernt, kann Elemente überspringen. Vorher mit [...area.relList] eine Kopie anlegen.
Leerzeichen in Tokens: add(), remove() und ähnliche Methoden werfen einen InvalidCharacterError, wenn ein Token Leerzeichen enthält, und einen SyntaxError bei leerem String.
supports(): Diese Methode funktioniert nur bei Token-Listen mit definierten erlaubten Werten, etwa relList. Bei classList wirft sie einen TypeError. In älteren Browsern fehlt sie, deshalb Optional Chaining (?.) verwenden.
Sicherheit: Bei target="_blank" auf fremde Ziele sollte noopener gesetzt werden, damit die Zielseite nicht über window.opener auf das eigene Fenster zugreifen kann (Tabnabbing). Moderne Browser setzen noopener bei _blank inzwischen implizit.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome 65+, Firefox 30+, Safari 9+, Edge 79+). Der Internet Explorer kennt relList an <area> nicht.

Siehe auch

HTMLAreaElement.host HTMLAreaElement.rel HTMLAreaElement.alt HTMLAreaElement.coords HTMLAreaElement.hash