Szybka pomoc

Ściągawka z DOM Selection API

Szybki przewodnik po DOM Selection API w przeglądarce z document.getSelection: zarządzanie zakresami, zwijanie karetki i zdarzenia zaznaczenia.

· Opublikowano

Szybki przewodnik po interfejsie DOM Selection API (window.getSelection()).

🔗 Powiązane: Ściągawka z DOM Range API

Pobieranie bieżącego zaznaczenia (Getting Current Selection)

const selection = window.getSelection(); // lub document.getSelection()
const selectedText = selection.toString();

Zarządzanie zakresami (Range Management)

// Dostep do aktywnego zakresu
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Wyczysc wszystkie aktywne zaznaczenia (odznacza caly tekst)
selection.removeAllRanges();

// Ustaw nowe zaznaczenie programowo
selection.addRange(range);

// Usun okreslony zakres
selection.removeRange(range);

Karetka i zwijanie (Caret & Collapsing)

// Zwin zaznaczenie do pojedynczego punktu (karetka)
selection.collapse(parentNode, offset);

// Zwin do granicy poczatkowej lub koncowej
selection.collapseToStart();
selection.collapseToEnd();

// Sprawdz, czy zaznaczenie jest obecnie zwiniete (migajacy kursor)
const isCaret = selection.isCollapsed;

Usuwanie zaznaczenia (Selection Deletion)

// Usuwa zaznaczona zawartosc z biezacego dokumentu DOM
selection.deleteFromDocument();

Zdarzenia zmiany zaznaczenia (Selection Change Events)

document.addEventListener('selectionchange', () => {
  const sel = document.getSelection();
  // Rejestruj zmiane zaznaczenia
  console.log('Selection changed:', sel.toString());
});

Powiązane tematy