Σύντομος οδηγός αναφοράς για το τυπικό DOM Range API (document.createRange()).
🔗 Σχετικά: Φύλλο οδηγιών DOM Selection API
Δημιουργία Range (Creating a Range)
const range = document.createRange();
Ορισμός ορίων (Setting Boundaries)
// Ορισμος αρχης και τελους βασει κομβου και μετατοπισης (offset)
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Ορισμος σε σχεση με γειτονικα στοιχεια
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Γρηγορη επιλογη ολοκληρου κομβου η μονο των περιεχομενων του
range.selectNode(node); // Περιλαμβανει τον ιδιο τον κομβο
range.selectNodeContents(node); // Επιλεγει ολους τους θυγατρικους κομβους
Σύμπτυξη ορίων (Collapsing Boundaries)
range.collapse(true); // Συμπτυξη στην αρχη του ευρους
range.collapse(false); // Συμπτυξη στο τελος του ευρους
console.log(range.collapsed); // true εαν η αρχη και το τελος ταυτιζονται
Χειρισμός περιεχομένου (Content Manipulation)
// Αντιγραφη: Επιστρεφει DocumentFragment χωρις αλλαγη στο DOM
const fragment = range.cloneContents();
// Αποκοπη: Αφαιρει τα περιεχομενα απο το DOM και επιστρεφει DocumentFragment
const extracted = range.extractContents();
// Διαγραφη: Αφαιρει πληρως τα περιεχομενα απο το DOM
range.deleteContents();
// Εισαγωγη νεου κομβου στην αρχη του ευρους
range.insertNode(newNode);
// Περικλειει τα περιεχομενα με νεο στοιχειο
range.surroundContents(document.createElement('mark'));
Ιδιότητες μόνο για ανάγνωση (Read-Only Properties)
range.startContainer: Ο κομβος στον οποιο ξεκινα το ευρος.range.startOffset: Αριθμος μετατοπισης εντος του startContainer.range.endContainer: Ο κομβος στον οποιο τερματιζεται το ευρος.range.endOffset: Αριθμος μετατοπισης εντος του endContainer.range.commonAncestorContainer: Ο βαθυτερος κοινος προγονος των δυο κομβων.range.toString(): Συμβολοσειρα με τα κειμενικα περιεχομενα του ευρους.