Signatur
Beschreibung
Die Eigenschaft pathname eines HTMLAnchorElement liefert den Pfad der im href-Attribut hinterlegten URL. Dazu wird href zuerst gegen die Basis-URL des Dokuments aufgelöst. Der Wert beginnt mit / und enthält weder den Query-String (?…) noch das Fragment (#…). Bei URLs ohne hierarchischen Pfad, etwa mailto:, gibt die Eigenschaft den undurchsichtigen Pfad zurück (z. B. die E-Mail-Adresse), bei ungültigem oder fehlendem href den leeren String.
Die Eigenschaft ist schreibbar. Wenn du einen neuen Wert zuweist, wird das href-Attribut entsprechend geändert. Protokoll, Host, search und hash bleiben dabei erhalten. Fehlt der führende Schrägstrich, ergänzt der Browser ihn. Sonderzeichen werden prozentkodiert.
Typische Einsatzfälle sind das Hervorheben des aktiven Navigationspunkts (Vergleich mit location.pathname), das Erkennen interner Links in Single-Page-Anwendungen und das gezielte Umschreiben von Link-Zielen, ohne die URL von Hand zerlegen zu müssen. Die Eigenschaft gehört zum Mixin HTMLHyperlinkElementUtils, das auch HTMLAreaElement implementiert. Sie verhält sich genauso wie URL.pathname.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | string | Nur beim Setzen: der neue Pfad, z. B. "/blog/artikel". Ein fehlender führender / wird ergänzt, Sonderzeichen werden prozentkodiert. |
Rückgabewert
/, z. B. "/docs/index.html". Bei URLs mit nicht-hierarchischem Pfad (z. B. mailto:) der undurchsichtige Pfad, bei fehlendem oder ungültigem href der leere String.Beispiele
Pfad eines Links auslesen
const link = document.createElement('a');
link.href = 'https://example.com/shop/produkte/42?farbe=rot#details';
console.log(link.pathname);
console.log(link.search);
console.log(link.hash);Aktiven Menüpunkt hervorheben
// Markiert alle Navigationslinks, deren Pfad zur aktuellen Seite passt
const normalisieren = (pfad) => pfad.replace(/\/$/, '') || '/';
const aktuell = normalisieren(location.pathname);
document.querySelectorAll('nav a').forEach((a) => {
const istAktiv = a.origin === location.origin && normalisieren(a.pathname) === aktuell;
a.classList.toggle('aktiv', istAktiv);
if (istAktiv) a.setAttribute('aria-current', 'page');
});Pfad setzen – Query und Fragment bleiben erhalten
const link = document.createElement('a');
link.href = 'https://example.com/alt/seite?id=7#oben';
link.pathname = 'neu/seite mit leerzeichen';
console.log(link.href);Relative Links werden aufgelöst
// Angenommen, das Dokument liegt unter https://example.com/docs/api/
const link = document.createElement('a');
link.href = '../guide/start.html';
console.log(link.getAttribute('href')); // Rohwert des Attributs
console.log(link.pathname); // aufgelöster Pfad// Wichtig · Fallstricke
- Prozentkodierung: Der zurückgegebene Pfad ist kodiert (
%20statt Leerzeichen). Für die Anzeige oder für Vergleiche nutzt dudecodeURIComponent(), am besten in einemtry-Block, weil fehlerhafte Kodierungen einenURIErrorauslösen. - Schrägstrich am Ende:
/blogund/blog/sind unterschiedliche Pfade. Normalisiere sie vor einem Vergleich. - Auflösung: Der Wert basiert auf der aufgelösten URL, nicht auf dem Attribut-Rohwert. Wichtig ist dabei ein vorhandenes
<base>-Element. Den Rohwert erhältst du mitgetAttribute('href'). - Nicht-hierarchische URLs: Bei
mailto:,javascript:oderdata:enthältpathnameden undurchsichtigen Rest der URL, und eine Zuweisung hat keine Wirkung. - Sicherheit: Wenn du Pfade aus Benutzereingaben setzt, prüfe zusätzlich
originbzw.protocol. Ein Pfadwechsel ändert nicht das Ziel-Protokoll. Einjavascript:-Link bleibt also gefährlich. - Kompatibilität: Wird von allen modernen Browsern unterstützt. Ältere Internet-Explorer-Versionen lieferten den Pfad teils ohne führenden
/. Für die URL-Verarbeitung ohne DOM-Element nimmst dunew URL().