Document.anchors — Eigenschaft · JavaScript-Referenz

Signatur

get Document.anchors

Beschreibung

document.anchors gibt eine live HTMLCollection zurück. Sie enthält alle <a>-Elemente des Dokuments, die ein name-Attribut besitzen. Die Reihenfolge entspricht der Reihenfolge im Dokument. Wichtig: Elemente, die nur ein id-Attribut haben, gehören nicht dazu, und Links mit href ohne name ebenfalls nicht. Für diese gibt es document.links.

Die Eigenschaft stammt aus der Zeit, in der Sprungmarken im Dokument mit <a name="kapitel1"> gesetzt wurden. Heute setzt man Sprungziele mit id an beliebigen Elementen, und das name-Attribut an <a> gilt in HTML5 als veraltet. Deshalb ist auch document.anchors als veraltet eingestuft. Sie funktioniert aber weiterhin in allen Browsern.

Sinnvoll ist die Eigenschaft vor allem bei älteren Inhalten, zum Beispiel wenn man aus importierten Dokumenten mit alten Ankern ein Inhaltsverzeichnis erzeugt oder solche Inhalte auf id-Anker umstellt. In neuem Code greift man besser zu document.querySelectorAll('a[name]') oder '[id]'.

Rückgabewert

Typ

HTMLCollection<HTMLAnchorElement>

Beschreibung

Eine live HTMLCollection aller <a name="…">-Elemente. Ändert sich das DOM, wird sie automatisch aktualisiert. Gibt es keine solchen Elemente, ist die Sammlung leer (length === 0).

Beispiele

Anzahl und Namen aller Anker ausgeben

// HTML: <a name="intro">Einleitung</a> <a name="api">API</a> <a href="/x">Link</a>
const anchors = document.anchors;
console.log(anchors.length);
for (const a of anchors) {
  console.log(a.name, '→', a.textContent);
}

2 intro → Einleitung api → API

Inhaltsverzeichnis aus alten Ankern erzeugen

const toc = document.createElement('ul');

// In ein Array kopieren, damit die Live-Sammlung beim Einfügen nicht stört
Array.from(document.anchors).forEach((anchor) => {
  const li = document.createElement('li');
  const link = document.createElement('a');
  link.href = `#${anchor.name}`;
  link.textContent = anchor.textContent.trim() || anchor.name;
  li.append(link);
  toc.append(li);
});

document.body.prepend(toc);

Alte name-Anker auf id umstellen

// Modernisierung: name → id, damit #fragment-Sprünge standardkonform funktionieren
const legacy = [...document.anchors];
legacy.forEach((a) => {
  if (!a.id) a.id = a.name;
  a.removeAttribute('name');
});

// Die Live-Sammlung ist jetzt leer
console.log(document.anchors.length);

Live-Verhalten beobachten

const anchors = document.anchors;
console.log('vorher:', anchors.length);

const a = document.createElement('a');
a.name = 'neu';
document.body.append(a);

console.log('nachher:', anchors.length); // automatisch aktualisiert

vorher: 0 nachher: 1

// Wichtig · Fallstricke

Veraltet: Die Eigenschaft steht nur noch aus Kompatibilitätsgründen im Standard. In neuem Code nimmt man document.querySelectorAll('a[name]'). Das liefert eine statische NodeList.
Nur name, nicht id: <a id="x"> erscheint nicht in document.anchors. Das ist der häufigste Denkfehler.
Live-Sammlung: Wer in einer Schleife über document.anchors Elemente entfernt oder ihr name-Attribut löscht, überspringt Einträge. Deshalb vorher mit Array.from() oder Spread-Syntax kopieren.
Kein Array: Methoden wie map oder filter fehlen. for...of funktioniert dagegen direkt.
Schreibgeschützt: Eine Zuweisung an document.anchors wird ignoriert und löst im Strict Mode einen TypeError aus.
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten. In älteren Firefox-Versionen waren Elemente mit id kurzzeitig enthalten, heute verhalten sich alle Browser gleich.

Siehe auch

Document.links Document.forms Document.applets Document.bgColor Document.fgColor