Signatur
Beschreibung
Die schreibgeschützte Eigenschaft document.links gibt eine HTMLCollection mit allen <a>- und <area>-Elementen zurück, die ein href-Attribut haben. Anker ohne href (z. B. reine Sprungmarken wie <a name="top">) gehören nicht dazu. Die Reihenfolge entspricht der Reihenfolge im Dokument.
Die Sammlung ist live: Fügst du Links hinzu, entfernst du welche oder setzt bzw. löschst du ein href-Attribut, ändert sich die Sammlung sofort, ohne dass du die Eigenschaft neu abfragen musst. Typische Anwendungsfälle sind das Prüfen externer Links, das nachträgliche Setzen von rel- oder target-Attributen, das Erfassen von Linkstatistiken oder das Erstellen eines Linkverzeichnisses.
Weil eine HTMLCollection kein Array ist, fehlen Methoden wie map() oder filter(). Mit Array.from() oder dem Spread-Operator wandelst du sie in ein Array um. Iterieren mit for...of funktioniert direkt. Einzelne Elemente erreichst du über den Index, über item() oder über namedItem() (anhand von id bzw. name).
Rückgabewert
HTMLCollection mit allen <a>- und <area>-Elementen, die ein href-Attribut besitzen, in Dokumentreihenfolge.Beispiele
Alle Links auflisten
// Anzahl und Ziele aller Links ausgeben
console.log(`Links im Dokument: ${document.links.length}`);
for (const link of document.links) {
console.log(link.textContent.trim(), '→', link.href);
}Externe Links sicher im neuen Tab öffnen
// Alle Links auf fremde Domains markieren
const externeLinks = [...document.links].filter(
(link) => link.hostname && link.hostname !== location.hostname
);
externeLinks.forEach((link) => {
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.classList.add('extern');
});
console.log(`${externeLinks.length} externe Links angepasst`);Live-Verhalten der Sammlung
const links = document.links;
console.log(links.length); // z. B. 3
// Neuer Link mit href → erscheint sofort in der Sammlung
const a = document.createElement('a');
a.href = '/impressum';
a.textContent = 'Impressum';
document.body.append(a);
console.log(links.length); // 4
// href entfernen → Element fällt aus der Sammlung heraus
a.removeAttribute('href');
console.log(links.length); // 3Kaputte Links finden (async)
// Prüft alle Links derselben Herkunft per HEAD-Anfrage
const pruefeLinks = async () => {
const interne = [...document.links].filter(
(link) => link.origin === location.origin
);
const ergebnisse = await Promise.allSettled(
interne.map(async (link) => {
const res = await fetch(link.href, { method: 'HEAD' });
return { url: link.href, ok: res.ok, status: res.status };
})
);
ergebnisse
.filter((r) => r.status === 'fulfilled' && !r.value.ok)
.forEach((r) => console.warn('Defekt:', r.value.url, r.value.status));
};
pruefeLinks();// Wichtig · Fallstricke
- Nur Elemente mit
href:<a>ohnehrefist nicht enthalten,<a href="">(leerer Wert) dagegen schon.<link>-Elemente im<head>gehören nicht dazu. - Live-Sammlung: Entfernst du beim Durchlaufen Elemente oder ihr
href, verschieben sich die Indizes, sodass Einträge übersprungen werden können. Wandle die Sammlung vorher mitArray.from()in eine feste Kopie um. - Kein Array:
forEach,mapundfiltergibt es aufHTMLCollectionnicht. Nutze Spread,Array.from()oderfor...of. - Schreibschutz: Eine Zuweisung an
document.linkswird ignoriert, im Strict Mode gibt es einenTypeError. - Grenzen: Links in Shadow-DOM-Bäumen und in
<iframe>s werden nicht erfasst. SVG-<a>-Elemente sind laut Spezifikation ebenfalls nicht enthalten. Wenn du genauer filtern willst, nimmdocument.querySelectorAll('a[href], area[href]'); das Ergebnis ist eine statischeNodeList. - Sicherheit: Wenn du über
document.linksLinks auftarget="_blank"umstellst, setze zusätzlichrel="noopener". Ältere Browser setzen das nicht automatisch, und ohne das Attribut ist Tabnabbing möglich. - Kompatibilität: Wird von allen Browsern seit Jahrzehnten unterstützt, einschließlich sehr alter Internet-Explorer-Versionen.