HTMLAreaElement.toString() — Methode · JavaScript-Referenz

Signatur

HTMLAreaElement.prototype.toString()

Beschreibung

Die Methode toString() von HTMLAreaElement ist der sogenannte Stringifier des Elements. Sie gibt die absolute URL zurück, auf die das <area>-Element einer Image-Map verweist. Der Wert entspricht exakt der Eigenschaft href. Das ist die Eigenschaft, nicht das rohe Attribut. Ein relativer Wert im href-Attribut wird dabei gegen die Basis-URL des Dokuments aufgelöst.

Praktisch ist das vor allem bei impliziter Umwandlung in einen String: Wenn ein <area>-Element in einem Template-Literal steht, mit + an einen String gehängt oder an String() bzw. new URL() übergeben wird, ruft JavaScript automatisch toString() auf. Du bekommst also direkt die URL und nicht "[object HTMLAreaElement]".

Die Methode gehört zum Mixin HTMLHyperlinkElementUtils, das HTMLAreaElement und HTMLAnchorElement gemeinsam nutzen. Deshalb verhält sich anchor.toString() genauso. Um Teile der URL auszulesen, eignen sich die Eigenschaften protocol, host, pathname, search und hash besser.

Rückgabewert

Typ

string

Beschreibung

Die vollständige, absolute URL des Elements, identisch mit area.href. Fehlt das href-Attribut, ist das Ergebnis ein leerer String "".

Beispiele

URL eines area-Elements auslesen

// HTML: <map name="karte"><area id="bereich" shape="rect" coords="0,0,100,100" href="/produkte?id=42#details" alt="Produkte"></map>
// Dokument-URL: https://example.com/shop/
const area = document.getElementById('bereich');

console.log(area.toString());
console.log(area.getAttribute('href'));

https://example.com/produkte?id=42#details /produkte?id=42#details

Implizite Umwandlung in Template-Literalen und mit new URL()

const area = document.querySelector('map[name="karte"] area');

// toString() wird automatisch aufgerufen
console.log(`Ziel: ${area}`);

// Das Element kann direkt an den URL-Konstruktor übergeben werden
const url = new URL(area);
console.log(url.searchParams.get('id'));

Ziel: https://example.com/produkte?id=42#details 42

Alle Ziele einer Image-Map sammeln und externe Links markieren

const areas = [...document.querySelectorAll('map area[href]')];

const externe = areas
  .map((area) => String(area)) // ruft toString() auf
  .filter((href) => new URL(href).origin !== location.origin);

console.log('Externe Ziele:', externe);

areas
  .filter((area) => externe.includes(area.toString()))
  .forEach((area) => {
    area.target = '_blank';
    area.rel = 'noopener noreferrer';
  });

Externe Ziele: ["https://partner.example.org/"]

// Wichtig · Fallstricke

Aufgelöste URL statt Attribut: toString() liefert immer die absolute URL. Den im HTML notierten Wert bekommst du nur mit getAttribute('href').
Kein href: Ohne href-Attribut gibt die Methode "" zurück, nicht null. Prüfe bei Bedarf mit area.hasAttribute('href').
Ungültige URLs: Lässt sich der Attributwert nicht als URL parsen, wird der rohe Attributwert zurückgegeben. Ein anschließendes new URL(area) kann dann einen TypeError werfen.
Sicherheit: Die URL kann auch javascript:- oder data:-Schemata enthalten. Prüfe das Protokoll, bevor du die URL in innerHTML, location oder window.open() weiterverwendest.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die Methode ist gleichwertig mit href, eine eigene Feature-Erkennung ist nicht nötig.

Siehe auch

HTMLAreaElement HTMLAreaElement.href HTMLAnchorElement.toString() URL.prototype.toString() Element.getAttribute() CSSTransformComponent.toString()