Γρήγορη αναφορά

Φύλλο οδηγιών DOM Selection API

Γρήγορος οδηγός αναφοράς για το DOM Selection API του προγράμματος περιήγησης με document.getSelection: διαχείριση range, σύμπτυξη δρομέα και συμβάντα.

· Δημοσιεύτηκε

Σύντομος οδηγός αναφοράς για το DOM Selection API (window.getSelection()).

🔗 Σχετικά: Φύλλο οδηγιών DOM Range API

Λήψη τρέχουσας επιλογής (Getting Current Selection)

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

Διαχείριση εύρους (Range Management)

// Προσβαση στο ενεργο ευρος
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Καθαρισμος ολων των ενεργων επιλογων
selection.removeAllRanges();

// Προγραμματιστικος ορισμος νεας επιλογης
selection.addRange(range);

// Αφαιρεση συγκεκριμενου ευρους
selection.removeRange(range);

Δρομέας και σύμπτυξη (Caret & Collapsing)

// Συμπτυξη επιλογης σε ενα σημειο (δρομεας)
selection.collapse(parentNode, offset);

// Συμπτυξη στην αρχη η στο τελος
selection.collapseToStart();
selection.collapseToEnd();

// Ελεγχος εαν η επιλογη ειναι συμπτυγμενη
const isCaret = selection.isCollapsed;

Διαγραφή επιλογής (Selection Deletion)

// Αφαιρει το επιλεγμενο περιεχομενο απο το DOM
selection.deleteFromDocument();

Συμβάντα αλλαγής επιλογής (Selection Change Events)

document.addEventListener('selectionchange', () => {
  const sel = document.getSelection();
  // Καταγραφη αλλαγης
  console.log('Selection changed:', sel.toString());
});

Σχετικά θέματα