Guida rapida di riferimento all'API standard DOM Range API (document.createRange()).
🔗 Correlato: Foglio di riferimento DOM Selection API
Creare un Range (Creating a Range)
const range = document.createRange();
Impostare i confini (Setting Boundaries)
// Imposta inizio e fine tramite nodo contenitore e offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Imposta rispetto agli elementi circostanti
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Selezione rapida di un intero nodo o dei suoi contenuti
range.selectNode(node); // Include il nodo stesso
range.selectNodeContents(node); // Seleziona tutti i nodi figli del nodo
Collasso dei confini (Collapsing Boundaries)
range.collapse(true); // Collassa il range sul punto di inizio (cursore all'inizio)
range.collapse(false); // Collassa il range sul punto finale (cursore alla fine)
console.log(range.collapsed); // true se i punti di inizio e fine sono identici
Manipolazione dei contenuti (Content Manipulation)
// Copia: restituisce un DocumentFragment senza alterare il DOM
const fragment = range.cloneContents();
// Taglia: rimuove il contenuto dal DOM e restituisce DocumentFragment
const extracted = range.extractContents();
// Elimina: cancella completamente il contenuto dal DOM
range.deleteContents();
// Inserisce un elemento alla posizione iniziale del range
range.insertNode(newNode);
// Circonda il contenuto del range con un elemento
range.surroundContents(document.createElement('mark'));
Proprietà di sola lettura (Read-Only Properties)
range.startContainer: Nodo in cui inizia il range.range.startOffset: Numero che rappresenta l'offset in startContainer.range.endContainer: Nodo in cui termina il range.range.endOffset: Numero che rappresenta l'offset in endContainer.range.commonAncestorContainer: Nodo antenato comune piu profondo di entrambi i contenitori.range.toString(): Contenuto testuale del range come stringa.