HTMLElement.anchorElement — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.anchorElement

Beschreibung

Die Eigenschaft anchorElement gehört zur CSS-Ankerpositionierung (CSS Anchor Positioning). Sie liefert eine Referenz auf das HTMLElement, an das ein Element implizit gebunden ist. Diese Bindung entsteht, wenn das Element das HTML-Attribut anchor trägt und darin die id eines anderen Elements steht, zum Beispiel <div anchor="info-btn">.

Die Eigenschaft hilft bei Tooltips, Popovers oder Info-Kästen, die am Anker ausgerichtet werden. Per Skript lässt sich prüfen, ob und an welches Element ein positioniertes Element gebunden ist, etwa um Beschriftungen, ARIA-Attribute oder Ereignis-Handler am Anker zu setzen.

Wichtig: anchorElement erkennt nur Verknüpfungen über das HTML-Attribut anchor. Verknüpft CSS die Elemente über anchor-name und position-anchor, liefert die Eigenschaft null, obwohl das Element visuell am Anker ausgerichtet ist.

Rückgabewert

Typ

HTMLElement | null

Beschreibung

Das Ankerelement, auf das das Attribut anchor verweist. Der Wert ist null, wenn das Attribut fehlt, keine passende id existiert oder der Browser die Funktion nicht unterstützt (dann ist die Eigenschaft meist undefined).

Beispiele

Ankerelement eines Tooltips auslesen

// Anker und Tooltip dynamisch erzeugen
const button = document.createElement('button');
button.id = 'info-btn';
button.textContent = 'Info';

const tooltip = document.createElement('div');
tooltip.setAttribute('anchor', 'info-btn');
tooltip.textContent = 'Zusätzliche Hinweise';

document.body.append(button, tooltip);

console.log(tooltip.anchorElement?.id ?? 'kein Anker (oder nicht unterstützt)');

info-btn (in Browsern ohne Unterstützung: kein Anker (oder nicht unterstützt))

Funktion erkennen und ARIA-Verknüpfung setzen

const supportsAnchorAttr = 'anchorElement' in HTMLElement.prototype;

const linkTooltips = () => {
  document.querySelectorAll('[anchor]').forEach((el) => {
    // Ersatzweg: Anker selbst über die id im Attribut suchen
    const anchor = supportsAnchorAttr
      ? el.anchorElement
      : document.getElementById(el.getAttribute('anchor'));

    if (!anchor) return;
    if (!el.id) el.id = `tip-${crypto.randomUUID()}`;
    anchor.setAttribute('aria-describedby', el.id);
  });
};

linkTooltips();
console.log('Unterstützt:', supportsAnchorAttr);

Unterstützt: false (in den meisten Browsern)

CSS-Verknüpfung wird nicht erkannt

const anchor = document.createElement('span');
anchor.textContent = 'Anker';
anchor.style.anchorName = '--mein-anker';

const box = document.createElement('div');
box.textContent = 'Positioniert';
box.style.position = 'absolute';
box.style.positionAnchor = '--mein-anker';

document.body.append(anchor, box);

// Die CSS-Verknüpfung erscheint nicht in anchorElement
console.log(box.anchorElement);

null (bzw. undefined ohne Unterstützung)

// Wichtig · Fallstricke

Experimentell und nicht standardisiert: Das Attribut anchor und anchorElement gibt es nur in Chromium-Browsern hinter dem Flag „Experimental Web Platform features“. Firefox und Safari unterstützen sie nicht. Im Produktivcode deshalb immer vorher prüfen, z. B. mit 'anchorElement' in HTMLElement.prototype.
Nur HTML-Verknüpfungen: Verknüpfungen über CSS (anchor-name / position-anchor) oder über die Funktion anchor() erkennt die Eigenschaft nicht. Die CSS-Ankerpositionierung selbst ist in Chromium seit Version 125 regulär verfügbar, diese Eigenschaft aber nicht.
Verweist das Attribut anchor auf eine nicht vorhandene id, ist der Wert null. Es gibt keinen Fehler.
Die Eigenschaft ist zum Auslesen gedacht. Um die Verknüpfung zu ändern, setzt man besser das Attribut per setAttribute('anchor', id) neu.
Die Spezifikation kann sich noch ändern oder die Eigenschaft kann ganz entfallen. Für stabile Lösungen die Ankerbeziehung selbst über id und getElementById() verwalten.

Siehe auch

HTMLElement HTMLElement.popover HTMLElement.prototype.showPopover() Document.prototype.getElementById() Element.prototype.setAttribute() ElementInternals.ariaRelevant HTMLTableSectionElement.ch