HTMLAreaElement.pathname — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.pathname

Beschreibung

Die Eigenschaft pathname eines HTMLAreaElement gibt den Pfad der im href-Attribut hinterlegten URL als Zeichenkette zurück. Der Wert beginnt bei hierarchischen URLs (z. B. http:, https:) immer mit einem /. Query-String (?…) und Fragment (#…) sind nicht enthalten.

Die Eigenschaft stammt aus dem Mixin HTMLHyperlinkElementUtils. <a>-Elemente und das URL-Objekt stellen sie auf dieselbe Weise bereit. Ein relatives href wird vorher gegen die Basis-URL des Dokuments aufgelöst. pathname liefert also immer den absoluten Pfad.

Die Eigenschaft ist auch beschreibbar: Weist man ihr einen Wert zu, ändert sich nur der Pfadteil des href-Attributs. Protokoll, Host, Query und Fragment bleiben erhalten. Sonderzeichen werden dabei automatisch prozentkodiert. Das ist praktisch, wenn man bei Imagemaps Links nachträglich umschreiben will, z. B. für Sprachpräfixe oder Routing.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: der neue Pfad. Fehlt der führende `/`, wird er bei hierarchischen URLs automatisch ergänzt.

Rückgabewert

Typ

string

Beschreibung

Der prozentkodierte Pfad der URL, z. B. "/produkte/kamera.html". Bei fehlendem oder ungültigem href ist er leer ("").

Beispiele

Pfad einer Imagemap-Fläche auslesen

// HTML: <map name="karte"><area id="nord" shape="rect" coords="0,0,100,100" href="https://example.com/regionen/nord.html?lang=de#info" alt="Nord"></map>
const area = document.getElementById('nord');
console.log(area.pathname);

/regionen/nord.html

Relatives href wird aufgelöst

// Dokument liegt unter https://example.com/shop/index.html
const area = document.createElement('area');
area.href = 'kategorie/foto?seite=2';
console.log(area.pathname);
console.log(area.search);

/shop/kategorie/foto ?seite=2

Sprachpräfix in alle Flächen einer Imagemap einfügen

const lang = 'en';
document.querySelectorAll('map[name="karte"] area[href]').forEach((area) => {
  // Nur Links auf dieselbe Origin umschreiben
  if (area.origin === location.origin && !area.pathname.startsWith(`/${lang}/`)) {
    area.pathname = `/${lang}${area.pathname}`;
  }
});
console.log(document.querySelector('area').href);

https://example.com/en/regionen/nord.html?lang=de#info

Aktive Fläche anhand der aktuellen Seite markieren

const areas = [...document.querySelectorAll('area[href]')];
const aktiv = areas.find((a) => a.pathname === location.pathname);
if (aktiv) {
  aktiv.setAttribute('aria-current', 'page');
  console.log(`Aktiv: ${aktiv.alt}`);
}

Aktiv: Nord

// Wichtig · Fallstricke

Prozentkodierung: Der zurückgegebene Pfad ist kodiert. Aus /über uns wird zum Beispiel /%C3%BCber%20uns. Zum Anzeigen oder Vergleichen solltest du den Wert bei Bedarf mit decodeURIComponent() dekodieren.
Kein Query, kein Fragment: Diese Teile liefern search bzw. hash. Enthält der zugewiesene Wert ein ? oder #, wird das Zeichen kodiert (%3F, %23) und nicht als Trennzeichen verstanden.
Nicht-hierarchische URLs: Bei mailto:- oder javascript:-URLs gibt es keinen führenden /. Das Setzen hat hier meist keine Wirkung.
Fehlendes href: Ohne gültiges href ist der Wert \"\". Das Setzen wird dann ignoriert.
Sicherheit: Pfade aus Benutzereingaben nicht ungeprüft übernehmen. Sie können Links auf unerwartete Ressourcen umleiten. Prüfe beim Umschreiben vorher origin.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Sehr alte Versionen des Internet Explorer lieferten den Pfad ohne führenden /.

Siehe auch

URL.pathname Location.pathname HTMLAreaElement.hostname HTMLAreaElement.username HTMLAreaElement.shape