Référence rapide

Aide-mémoire DOM Selection API

Guide de référence rapide pour l'API DOM Selection des navigateurs avec document.getSelection : gestion des plages, réduction du curseur et événements.

· Publié le

Guide de référence rapide pour l'API standard des navigateurs DOM Selection API (window.getSelection()).

🔗 Connexe : Aide-mémoire DOM Range API

Obtenir la sélection courante (Getting Current Selection)

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

Gestion des plages (Range Management)

// Acceder a la plage active
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Effacer toutes les selections actives (deselectionne le texte)
selection.removeAllRanges();

// Definir une nouvelle selection par programmation
selection.addRange(range);

// Supprimer une plage specifique
selection.removeRange(range);

Curseur et réduction (Caret & Collapsing)

// Reduire la selection a un seul point (curseur)
selection.collapse(parentNode, offset);

// Reduire au debut ou a la fin
selection.collapseToStart();
selection.collapseToEnd();

// Verifie si la selection est actuellement reduite (curseur clignotant)
const isCaret = selection.isCollapsed;

Suppression de la sélection (Selection Deletion)

// Supprime le contenu selectionne directement du document DOM
selection.deleteFromDocument();

Événements de changement de sélection (Selection Change Events)

document.addEventListener('selectionchange', () => {
  const sel = document.getSelection();
  // Journaliser le changement
  console.log('Selection changed:', sel.toString());
});

Sujets associés