HTMLAnchorElement.hostname — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.hostname

Beschreibung

Die Eigenschaft hostname eines <a>-Elements gibt den Host-Teil der verlinkten URL zurück, also den Domainnamen (z. B. www.example.com) oder die IP-Adresse (z. B. 192.168.0.1 oder [::1]). Anders als bei host ist der Port nicht enthalten.

Relative href-Werte werden vorher gegen die Basis-URL des Dokuments aufgelöst. Ein Link wie /kontakt liefert deshalb den Hostnamen der aktuellen Seite. Internationalisierte Domainnamen (IDN) werden in der Punycode-Form zurückgegeben, z. B. xn--mnchen-3ya.de für münchen.de.

Die Eigenschaft lässt sich auch schreiben: Weist man ihr einen neuen Wert zu, wird das href-Attribut entsprechend angepasst, Pfad, Query und Fragment bleiben erhalten. In der Praxis wird hostname vor allem dazu genutzt, externe Links zu erkennen (z. B. für rel="noopener" oder ein Icon), Links auf eine andere Umgebung umzuschreiben oder Tracking nach Domain zu filtern.

Rückgabewert

Typ

string

Beschreibung

Der Hostname der verlinkten URL ohne Port. Leerer String "", wenn href fehlt, nicht parsbar ist oder das Schema keinen Host hat (z. B. mailto:, javascript:).

Beispiele

Hostname eines Links auslesen

const link = document.createElement('a');
link.href = 'https://shop.example.com:8443/produkte?id=42#details';

console.log(link.hostname); // ohne Port
console.log(link.host);     // mit Port

shop.example.com shop.example.com:8443

Externe Links automatisch kennzeichnen

// Alle Links, die auf eine andere Domain zeigen, sicher in neuem Tab öffnen
const ownHost = window.location.hostname;

document.querySelectorAll('a[href]').forEach((a) => {
  if (a.hostname && a.hostname !== ownHost) {
    a.target = '_blank';
    a.rel = 'noopener noreferrer';
    a.classList.add('extern');
  }
});

Links auf eine Staging-Umgebung umschreiben

const a = document.createElement('a');
a.href = 'https://www.example.com/blog/artikel-1?ref=nav';

// Nur den Host tauschen – Pfad und Query bleiben erhalten
a.hostname = 'staging.example.com';
console.log(a.href);

https://staging.example.com/blog/artikel-1?ref=nav

Relative URLs und Sonderfälle

const rel = document.createElement('a');
rel.href = '/kontakt';
console.log(rel.hostname === location.hostname);

const mail = document.createElement('a');
mail.href = 'mailto:info@example.com';
console.log(JSON.stringify(mail.hostname));

const idn = document.createElement('a');
idn.href = 'https://münchen.de/';
console.log(idn.hostname);

true "" xn--mnchen-3ya.de

// Wichtig · Fallstricke

hostname vs. host: hostname enthält nie den Port, host schon (sofern er nicht der Standardport des Schemas ist). Für Domainvergleiche ist hostname meist die richtige Wahl.
Sicherheit: Für Allowlist-Prüfungen nie includes() oder endsWith('example.com') ohne Punkt verwenden – evilexample.com würde sonst durchrutschen. Besser exakt vergleichen oder auf '.example.com' prüfen.
Vergleiche berücksichtigen Punycode: münchen.de wird als xn--mnchen-3ya.de geliefert. Groß-/Kleinschreibung wird auf Kleinbuchstaben normalisiert.
IPv6-Adressen werden mit eckigen Klammern zurückgegeben, z. B. [::1].
Das Setzen auf einen ungültigen Wert oder bei URLs ohne Host (z. B. mailto:) wird stillschweigend ignoriert.
Außerhalb des DOM (z. B. in Node.js oder Web Workern) liefert new URL(href).hostname dasselbe Ergebnis.
Kompatibilität: wird von allen modernen Browsern seit Langem unterstützt; die Eigenschaft stammt aus dem HTMLHyperlinkElementUtils-Mixin, das auch HTMLAreaElement implementiert.

Siehe auch

HTMLAnchorElement.host HTMLAnchorElement.href HTMLAnchorElement.origin HTMLAnchorElement.port URL.hostname Location.hostname HTMLAnchorElement