Signatur
Beschreibung
Die Methode toString() von HTMLAnchorElement ist ein sogenannter Stringifier: Sie liefert die vollständige, absolut aufgelöste URL des Links und gibt dabei exakt denselben Wert zurück wie die Eigenschaft HTMLAnchorElement.href. Relative Angaben im href-Attribut, etwa /kontakt, werden anhand der Basis-URL des Dokuments (bzw. eines <base>-Elements) zu einer vollständigen URL aufgelöst.
Weil es sich um einen Stringifier handelt, wird die Methode immer dann automatisch aufgerufen, wenn ein Link-Element in einen String umgewandelt wird: bei Template-Literalen, bei der Verkettung mit +, bei String(link) oder wenn das Element an APIs übergeben wird, die einen String erwarten, zum Beispiel new URL(link) oder fetch(link).
In der Praxis schreibt man meist direkt link.href, weil das lesbarer ist. toString() ist vor allem nützlich, weil Link-Elemente sich dadurch ohne Umweg in String-Kontexten verwenden lassen. Das gleiche Verhalten gibt es auch bei HTMLAreaElement, URL und Location.
Rückgabewert
HTMLAnchorElement.href. Hat das Element kein href-Attribut, ist das Ergebnis ein leerer String "".Beispiele
Relative URL auflösen
// Angenommen, die Seite liegt unter https://example.com/blog/artikel.html
const link = document.createElement('a');
link.setAttribute('href', '../kontakt?ref=blog#formular');
console.log(link.toString());
console.log(link.getAttribute('href')); // Rohwert des Attributs
console.log(link.toString() === link.href);Automatische Umwandlung in String-Kontexten
const link = document.createElement('a');
link.href = 'https://example.com/docs/api';
// Template-Literal und String() rufen toString() implizit auf
console.log(`Ziel: ${link}`);
console.log(String(link));
// Das Element lässt sich direkt an den URL-Konstruktor übergeben
const url = new URL(link);
console.log(url.pathname);Alle externen Links einer Seite sammeln
const externeLinks = [...document.querySelectorAll('a[href]')]
.map((a) => a.toString())
.filter((href) => new URL(href).origin !== location.origin);
console.log(`Externe Links: ${externeLinks.length}`);
console.table(externeLinks);Link-Ziel per fetch vorab laden
const link = document.querySelector('a.vorschau');
const ladeVorschau = async () => {
// fetch wandelt das Element per toString() in die URL um
const response = await fetch(link, { method: 'HEAD' });
console.log(`${link} → Status ${response.status}`);
};
ladeVorschau();// Wichtig · Fallstricke
- Kein Attribut, leerer String: Fehlt das
href-Attribut, lieferttoString()den Wert"". Ein Aufruf wienew URL(link)wirft dann einenTypeError. Prüfe das vorher mitlink.hasAttribute('href'). - Nicht aufrufbarer Rohwert: Kann der Wert nicht als URL aufgelöst werden (z. B.
http://[ungültig), gibttoString()den Rohwert des Attributs unverändert zurück. - Attribut und aufgelöster Wert unterscheiden sich: Den ursprünglich im HTML angegebenen Wert erhältst du nur über
getAttribute('href').toString()undhrefliefern immer die aufgelöste, normalisierte Form, etwa mit Prozent-Kodierung und kleingeschriebenem Hostnamen. - Sicherheit: Die URL kann auch das Schema
javascript:oderdata:haben. Bevor du eine solche URL weiterverwendest, etwa inlocation.hrefoderwindow.open(), solltest du das Protokoll prüfen (new URL(href).protocol). Sonst drohen XSS-Lücken. - SVG-Links:
<a>-Elemente innerhalb von SVG sindSVGAElement. IhrtoString()liefert"[object SVGAElement]"und nicht die URL. - Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt. In Node.js gibt es die Methode nur mit einer DOM-Implementierung wie jsdom.