Selection.anchorNode — Eigenschaft · JavaScript-Referenz

Signatur

Selection.anchorNode

Beschreibung

Selection.anchorNode gibt den Knoten zurück, in dem der Anker der aktuellen Auswahl liegt. Der Anker ist die Stelle, an der der Nutzer die Auswahl begonnen hat, also wo er z. B. die Maustaste gedrückt hat. Das Gegenstück ist focusNode: der Knoten, an dem die Auswahl endet.

Wichtig: Der Anker muss nicht vor dem Fokus im Dokument stehen. Zieht der Nutzer die Maus von rechts nach links, liegt anchorNode im Dokument hinter focusNode. Wer den tatsächlichen Anfang im Dokument braucht, verwendet selection.getRangeAt(0).startContainer.

Meistens ist der zurückgegebene Knoten ein Text-Knoten. Die genaue Position darin liefert anchorOffset (Zeichenposition). Ist der Anker ein Elementknoten, zählt anchorOffset stattdessen dessen Kindknoten. Typische Anwendungen sind Rich-Text-Editoren, Werkzeugleisten, die bei Auswahl eingeblendet werden, Markierungs- und Kommentarfunktionen sowie die Frage, ob eine Auswahl innerhalb eines bestimmten Containers liegt.

Rückgabewert

Typ

Node | null

Beschreibung

Der Knoten, in dem die Auswahl beginnt, meist ein Text-Knoten. null, wenn keine Auswahl besteht (rangeCount === 0).

Beispiele

Anker der aktuellen Auswahl ausgeben

document.addEventListener('mouseup', () => {
  const sel = window.getSelection();
  if (!sel || !sel.anchorNode) {
    console.log('Keine Auswahl');
    return;
  }
  console.log('Anker-Knoten:', sel.anchorNode.nodeName);
  console.log('Offset:', sel.anchorOffset);
  console.log('Text:', sel.anchorNode.textContent.slice(0, 30));
});

Anker-Knoten: #text Offset: 4 Text: Lorem ipsum dolor sit amet

Prüfen, ob die Auswahl in einem Editor-Container liegt

const editor = document.querySelector('#editor');

document.addEventListener('selectionchange', () => {
  const { anchorNode, focusNode } = document.getSelection();
  const inEditor = anchorNode !== null &&
    editor.contains(anchorNode) &&
    editor.contains(focusNode);
  document.querySelector('#toolbar').hidden = !inEditor;
});

Umschließendes Element des Ankers finden

const getAnchorElement = () => {
  const { anchorNode } = window.getSelection();
  if (!anchorNode) return null;
  // Text-Knoten haben kein closest(), deshalb zum Elternelement wechseln
  return anchorNode.nodeType === Node.TEXT_NODE
    ? anchorNode.parentElement
    : anchorNode;
};

const el = getAnchorElement();
console.log(el?.closest('p')?.id ?? 'kein Absatz');

absatz-3

Leserichtung der Auswahl erkennen

const isBackward = (sel) => {
  if (!sel.anchorNode || sel.isCollapsed) return false;
  const pos = sel.anchorNode.compareDocumentPosition(sel.focusNode);
  if (pos === 0) return sel.focusOffset < sel.anchorOffset;
  return Boolean(pos & Node.DOCUMENT_POSITION_PRECEDING);
};

console.log(isBackward(window.getSelection()));

true // wenn von rechts nach links markiert wurde

// Wichtig · Fallstricke

Nicht zwingend der Anfang: Bei Auswahl „rückwärts“ (von rechts nach links) steht anchorNode im Dokument hinter focusNode. Für den Anfang im Dokument getRangeAt(0).startContainer verwenden.
Auf null prüfen: Ohne Auswahl ist der Wert null. Ein direkter Zugriff wie anchorNode.parentElement wirft dann einen TypeError.
Meist ein Textknoten: Methoden wie closest() oder classList gibt es nur bei Elementen. Deshalb vorher über parentElement zum Element wechseln.
Formularfelder: Bei Auswahl in <input> oder <textarea> zeigt anchorNode je nach Browser auf das Element selbst oder auf dessen Elternknoten, nicht auf den Text darin. Dafür besser selectionStart/selectionEnd des Feldes nutzen.
Shadow DOM: Liegt die Auswahl in einem Shadow Root, liefert document.getSelection() je nach Browser einen angepassten Knoten außerhalb des Shadow Trees. Neuere Browser bieten dafür getComposedRanges().
Schreibgeschützt: Zuweisungen werden ignoriert. Den Anker ändert man mit collapse(), setBaseAndExtent() oder addRange().
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

Selection.anchorOffset Selection.focusNode Selection.focusOffset Selection.getRangeAt() Selection.setBaseAndExtent() Window.getSelection() Selection