HTMLAreaElement.rel — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.rel

Beschreibung

Die Eigenschaft rel von HTMLAreaElement spiegelt das HTML-Attribut rel eines <area>-Elements wider. <area> legt verlinkte Bereiche innerhalb einer Imagemap (<map>) fest. Mit rel beschreibt man, in welcher Beziehung das aktuelle Dokument zum Ziel in href steht.

Der Wert ist eine durch Leerzeichen getrennte Liste von Schlüsselwörtern, zum Beispiel "noopener noreferrer", "nofollow", "external", "help" oder "license". Wenn man die Eigenschaft liest, erhält man den rohen Attributwert. Wenn man sie setzt, wird das Attribut direkt überschrieben.

Um einzelne Schlüsselwörter hinzuzufügen, zu entfernen oder abzufragen, ist relList meist besser geeignet. Diese Eigenschaft liefert eine DOMTokenList mit Methoden wie add(), remove() und contains(). rel ist dagegen praktisch, wenn man den ganzen Wert auf einmal lesen oder ersetzen will.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: neue, durch Leerzeichen getrennte Liste von Link-Typen, z. B. `"noopener nofollow"`. Andere Typen werden in eine Zeichenkette umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des rel-Attributs. Fehlt das Attribut, ist es eine leere Zeichenkette "".

Beispiele

rel-Wert einer Imagemap-Fläche auslesen

// HTML:
// <img src="karte.png" usemap="#karte" alt="Karte">
// <map name="karte">
//   <area id="berlin" shape="circle" coords="120,80,20"
//         href="https://example.com/berlin" rel="external nofollow" alt="Berlin">
// </map>

const area = document.getElementById('berlin');
console.log(area.rel);

external nofollow

Externe Ziele automatisch absichern

// Alle <area>-Elemente mit target="_blank" und fremdem Host absichern
document.querySelectorAll('area[target="_blank"]').forEach((area) => {
  const isExternal = new URL(area.href).origin !== location.origin;
  if (isExternal) {
    area.rel = 'noopener noreferrer';
  }
  console.log(area.alt, '→', area.rel || '(leer)');
});

Berlin → noopener noreferrer

rel und relList im Vergleich

const area = document.createElement('area');
area.href = 'https://example.com/lizenz';
area.rel = 'license';

// Ein Schlüsselwort ergänzen, ohne den String selbst zusammenzubauen
area.relList.add('nofollow');
console.log(area.rel);                          // spiegelt die Änderung wider
console.log(area.relList.contains('license'));

// Attribut entfernen: rel liefert dann einen leeren String
area.removeAttribute('rel');
console.log(JSON.stringify(area.rel));

license nofollow true ""

// Wichtig · Fallstricke

Überschreiben statt Ergänzen: Eine Zuweisung an rel ersetzt den gesamten Attributwert. Um einzelne Werte hinzuzufügen, verwendet man relList.add(). Sonst gehen bereits gesetzte Werte wie noopener verloren.
Keine Prüfung der Werte: Der Browser prüft die Schlüsselwörter nicht. Tippfehler wie "noopenr" werden stillschweigend übernommen und haben keine Wirkung.
Sicherheit: Moderne Browser behandeln target="_blank" auch ohne ausdrückliches rel="noopener" so, als wäre noopener gesetzt. Für ältere Browser und zur Klarheit empfiehlt sich trotzdem noopener. noreferrer verhindert zusätzlich, dass der Referer-Header gesendet wird.
Kompatibilität: Die Eigenschaft rel wird in allen aktuellen Browsern unterstützt. relList auf <area> gibt es erst seit neueren Versionen (z. B. Safari 9, Chrome 65). Den alten Internet Explorer unterstützen sie nicht.
Wirkung zeigt rel nur, wenn das <area>-Element ein href hat.

Siehe auch

HTMLAreaElement HTMLAreaElement.relList HTMLAreaElement.href HTMLAreaElement.target HTMLAnchorElement.rel DOMTokenList HTMLAreaElement.alt