HTMLAnchorElement.href — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.href

Beschreibung

Die Eigenschaft href von HTMLAnchorElement liefert die absolute URL des Links. Relative Angaben im Attribut, etwa href="../kontakt.html", werden gegen die Basis-URL des Dokuments aufgelöst. Diese Basis ist die Dokument-URL oder, falls vorhanden, das <base>-Element. Ist das Attribut nicht gesetzt, ist der Rückgabewert ein leerer String.

Die Eigenschaft ist der Stringifier des Elements. String(link), link.toString() und Template-Literale wie `${link}` geben deshalb genau den Wert von link.href zurück.

Wenn Sie href einen Wert zuweisen, wird das href-Attribut unverändert auf diesen String gesetzt. Beim nächsten Lesen kommt die aufgelöste absolute URL zurück. Brauchen Sie den Wert genau so, wie er im HTML steht, verwenden Sie getAttribute('href').

href stammt aus dem Mixin HTMLHyperlinkElementUtils. Einzelne Teile der URL erreichen Sie über protocol, host, hostname, port, pathname, search, hash und origin. Dieselbe Eigenschaft gibt es bei HTMLAreaElement.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Schreiben: neue absolute oder relative URL. Der Wert wird unverändert in das `href`-Attribut geschrieben.

Rückgabewert

Typ

string

Beschreibung

Die gegen die Basis-URL des Dokuments aufgelöste absolute URL. Fehlt das Attribut, ist es ein leerer String. Kann der Attributwert nicht als URL verarbeitet werden, kommt der Attributwert unverändert zurück.

Beispiele

Relative URL wird absolut aufgelöst

// Angenommen, die Seite liegt unter https://example.com/blog/artikel.html
const link = document.createElement('a');
link.setAttribute('href', '../kontakt.html?ref=blog#formular');

console.log(link.getAttribute('href')); // Rohwert aus dem Attribut
console.log(link.href);                 // absolut aufgelöst
console.log(link.pathname, link.search, link.hash);

../kontakt.html?ref=blog#formular https://example.com/kontakt.html?ref=blog#formular /kontakt.html ?ref=blog #formular

href setzen und den Stringifier nutzen

const link = document.createElement('a');
link.textContent = 'Dokumentation';
link.href = 'https://developer.mozilla.org/de/docs/Web/API';
document.body.append(link);

// Der Stringifier liefert denselben Wert wie href
console.log(String(link));
console.log(`Ziel: ${link}`);
console.log(link.href === link.toString());

https://developer.mozilla.org/de/docs/Web/API Ziel: https://developer.mozilla.org/de/docs/Web/API true

Externe Links erkennen und absichern

// Alle Links auf fremde Domains in neuem Tab öffnen, sicher mit rel="noopener"
const externeLinks = [...document.querySelectorAll('a[href]')]
  .filter((a) => /^https?:$/.test(a.protocol) && a.origin !== location.origin);

for (const a of externeLinks) {
  a.target = '_blank';
  a.rel = 'noopener noreferrer';
}

console.log(`${externeLinks.length} externe Links angepasst`);
console.log(externeLinks.map((a) => a.href));

3 externe Links angepasst ["https://github.com/", "https://example.org/info", "https://nodejs.org/de"]

Fehlendes Attribut vs. leeres Attribut

const ohne = document.createElement('a');
const leer = document.createElement('a');
leer.setAttribute('href', '');

console.log(JSON.stringify(ohne.href)); // kein Attribut vorhanden
console.log(leer.href === document.baseURI); // leeres Attribut = aktuelle Seite

"" true

// Wichtig · Fallstricke

Attribut und Eigenschaft sind nicht dasselbe: a.href gibt immer die aufgelöste absolute URL zurück, a.getAttribute('href') den Rohwert. Wer Selektoren wie a[href="/x"] mit a.href vergleicht, bekommt deshalb unerwartete Ergebnisse.
Leeres vs. fehlendes Attribut: Ohne Attribut ist der Wert "". Bei href="" kommt die URL des aktuellen Dokuments zurück.
Sicherheit (XSS): Weisen Sie niemals ungeprüfte Benutzereingaben an href zu. Werte wie javascript:alert(1) oder data:text/html,… führen beim Klick Code aus. Prüfen Sie vorher das Protokoll, zum Beispiel mit new URL(eingabe, location.href).protocol gegen eine Liste erlaubter Protokolle (https:, mailto:). Eine CSP ohne 'unsafe-inline' blockiert javascript:-URLs zusätzlich. Mit Trusted Types lassen sich solche Zuweisungen gezielt kontrollieren.
Ungültige URLs: Kann der Attributwert nicht als URL verarbeitet werden, kommt der Rohwert zurück. Die Teil-Eigenschaften wie host oder pathname sind dann leer.
<base>-Element: Ein <base href> im Dokument verändert die Auflösung aller relativen Links. Das ist eine häufige Fehlerquelle bei SPAs.
Neue Tabs: Setzen Sie bei target="_blank" auf fremde Seiten rel="noopener". Moderne Browser tun das inzwischen standardmäßig.
Die Eigenschaft wird von allen Browsern unterstützt. Das Mixin HTMLHyperlinkElementUtils mit origin, username und password gibt es in allen aktuellen Browsern.

Siehe auch

Location.href HTMLAnchorElement.rel HTMLAnchorElement.hash HTMLAnchorElement.host HTMLAnchorElement.hreflang