HTMLAnchorElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLAnchorElement extends HTMLElement

Beschreibung

HTMLAnchorElement ist die DOM-Schnittstelle für Hyperlinks (<a>). Sie erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt sie um linkspezifische Eigenschaften wie href, target, download, rel, relList, hreflang, type, referrerPolicy, ping und text.

Zusätzlich stellt das Interface die URL-Zerlegung aus HTMLHyperlinkElementUtils bereit: protocol, host, hostname, port, pathname, search, hash, origin, username und password. So lassen sich einzelne Teile eines Links lesen oder ändern, ohne den String selbst zu zerlegen. Die Eigenschaft href liefert dabei immer die absolute, aufgelöste URL, während getAttribute('href') den Rohwert aus dem HTML zurückgibt.

Typische Einsatzgebiete sind: externe Links automatisch mit target="_blank" und rel="noopener" versehen, per JavaScript Dateien zum Herunterladen anbieten (download zusammen mit URL.createObjectURL()), Tracking-Parameter anhängen oder das Navigationsverhalten per Klick-Handler abfangen (z. B. in Single-Page-Anwendungen).

Instanzen erhält man über document.createElement('a'), über Selektoren wie document.querySelector('a') oder über die Sammlung document.links (enthält alle <a>- und <area>-Elemente mit href).

Parameter

Name	Typ	Default	Beschreibung
$href	string	""	Eigenschaft: vollständige, absolute Ziel-URL des Links (spiegelt das Attribut `href`).
$target	string	""	Eigenschaft: Browsing-Kontext für die Navigation, z. B. `_blank`, `_self`, `_parent`, `_top`.
$download	string	""	Eigenschaft: signalisiert einen Download statt einer Navigation; der Wert dient als vorgeschlagener Dateiname.
$rel / relList	string / DOMTokenList	""	Eigenschaft: Beziehung zum verlinkten Dokument, z. B. `noopener`, `noreferrer`, `nofollow`. `relList` erlaubt `add()`, `remove()`, `contains()`.
$protocol, host, hostname, port, pathname, search, hash	string		Eigenschaften: einzelne URL-Bestandteile, les- und schreibbar.
$origin	string		Eigenschaft (nur lesbar): Herkunft der URL, z. B. `https://example.com`.
$referrerPolicy	string	""	Eigenschaft: Referrer-Richtlinie beim Folgen des Links, z. B. `no-referrer`.
$text	string		Eigenschaft: Textinhalt des Links (entspricht `textContent`).

Rückgabewert

Typ

HTMLAnchorElement

Beschreibung

Ein Link-Element-Objekt, z. B. von document.createElement('a') oder document.querySelector('a').

Beispiele

Link erzeugen und URL-Bestandteile auslesen

const link = document.createElement('a');
link.href = 'https://example.com:8080/shop/produkte?kategorie=buch#top';
link.textContent = 'Zum Shop';
document.body.append(link);

console.log(link.hostname);
console.log(link.port);
console.log(link.pathname);
console.log(link.search);
console.log(link.hash);
console.log(link.origin);

example.com 8080 /shop/produkte ?kategorie=buch #top https://example.com:8080

Externe Links sicher im neuen Tab öffnen

const externeLinks = [...document.querySelectorAll('a[href]')]
  .filter((a) => a.origin !== location.origin);

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

console.log(`${externeLinks.length} externe Links angepasst`);

3 externe Links angepasst

Generierte Datei per download-Attribut herunterladen

const csv = 'Name;Alter\nAnna;31\nBen;27';
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'personen.csv';
document.body.append(a);
a.click();
a.remove();

// Speicher freigeben
setTimeout(() => URL.revokeObjectURL(url), 1000);

Relativer Rohwert vs. aufgelöste URL

// HTML: <a id="doku" href="../doku/start.html">Doku</a>
const doku = document.getElementById('doku');
console.log(doku.getAttribute('href'));
console.log(doku.href);

// Query-Parameter anhängen
const url = new URL(doku.href);
url.searchParams.set('ref', 'navigation');
doku.href = url.toString();

../doku/start.html https://example.com/doku/start.html

// Wichtig · Fallstricke

Sicherheit: Links mit target="_blank" sollten rel="noopener" tragen, damit die Zielseite nicht über window.opener auf das eigene Fenster zugreifen kann (Reverse Tabnabbing). Moderne Browser setzen noopener bei _blank inzwischen implizit, ältere nicht.
XSS: Nie ungeprüfte Benutzereingaben in href schreiben – javascript:-URLs führen beim Klick Code aus. Vorher das Protokoll prüfen, z. B. ['http:', 'https:'].includes(new URL(input, location.href).protocol). Eine CSP ohne 'unsafe-inline' blockiert javascript:-URLs zusätzlich.
download funktioniert nur bei gleicher Herkunft sowie bei blob:- und data:-URLs; bei Cross-Origin-URLs wird er ignoriert und normal navigiert.
href liefert die absolute URL; ohne href-Attribut ist sie ein leerer String, und die URL-Bestandteile sind ebenfalls leer.
Die veralteten Attribute charset, coords, name, rev und shape sind in HTML5 überholt und sollten nicht mehr verwendet werden.
Kompatibilität: Grundfunktionen gibt es in allen Browsern; relList, referrerPolicy und ping werden von aktuellen Browsern unterstützt (ping ist in Firefox standardmäßig deaktiviert).

Siehe auch

Document.links MathMLAnchorElement HTMLAudioElement HTMLHRElement HTMLAreaElement