HTMLAnchorElement.host — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.host

Beschreibung

Die Eigenschaft host des HTMLAnchorElement-Interfaces liefert einen String mit dem Host der im href-Attribut hinterlegten URL. Er besteht aus dem hostname und – nur wenn der Port nicht leer ist – einem Doppelpunkt, gefolgt vom port, z. B. "example.com:8080". Ist die URL ohne Host (etwa mailto:-Links) oder nicht auslesbar, ist der Wert ein leerer String.

Standard-Ports des jeweiligen Schemas (80 für http:, 443 für https:) gelten als leer und erscheinen deshalb nicht in host. Relative href-Werte werden vorher gegen die Basis-URL des Dokuments aufgelöst, sodass host dann den Host der aktuellen Seite liefert.

Die Eigenschaft ist beschreibbar: Beim Setzen wird das href-Attribut des Links entsprechend angepasst, während Schema, Pfad, Query und Fragment erhalten bleiben. Typische Einsätze sind das Erkennen externer Links, das Umschreiben von Links auf eine andere Umgebung (z. B. Staging) oder das Auslesen von Domains ohne eigenes URL-Parsing.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: neuer Host im Format `hostname` oder `hostname:port`. Ungültige Werte werden ignoriert.

Rückgabewert

Typ

string

Beschreibung

Hostname und ggf. :port der Link-URL; leerer String, wenn die URL keinen Host besitzt oder ungültig ist.

Beispiele

Host eines Links auslesen

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

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

Standard-Port wird weggelassen

const a = document.createElement('a');
a.href = 'https://example.com:443/start';
console.log(a.host);

a.href = 'http://example.com:80/';
console.log(a.host);

example.com example.com

Externe Links markieren

// Alle Links, die auf einen fremden Host zeigen, bekommen rel und target
document.querySelectorAll('a[href]').forEach((link) => {
  if (link.host && link.host !== location.host) {
    link.target = '_blank';
    link.rel = 'noopener noreferrer';
    link.classList.add('extern');
  }
});

Links auf eine Staging-Umgebung umschreiben

const link = document.createElement('a');
link.href = 'https://www.example.com/api/users?page=2';

link.host = 'staging.example.com:3000';
console.log(link.href);

https://staging.example.com:3000/api/users?page=2

// Wichtig · Fallstricke

host vs. hostname: host kann einen Port enthalten, hostname nie. Wer nur die Domain vergleichen will, sollte hostname verwenden.
Standard-Ports: https://example.com:443 und https://example.com ergeben denselben host. Explizite Standard-Ports sind im Wert also nicht erkennbar.
Relative URLs: Bei href="/pfad" liefert host den Host des aktuellen Dokuments (bzw. von <base>) – nicht den leeren String.
Kein Host: Bei mailto:-, tel:- oder javascript:-Links ist host leer; Setzen hat dort keine Wirkung.
Internationalisierte Domains werden in Punycode zurückgegeben (z. B. xn--mnchen-3ya.de statt münchen.de).
Sicherheit: Ein Host-Vergleich für Vertrauensentscheidungen sollte exakt erfolgen (===), nicht per includes() oder endsWith() ohne Punkt-Präfix – sonst passt z. B. evil-example.com.
Für URL-Verarbeitung ohne DOM-Element bietet sich das URL-Objekt mit identischer host-Semantik an. Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

URL.host Location.host HTMLAnchorElement.hash HTMLAnchorElement.port HTMLAnchorElement.href