Guide de référence rapide pour l'API standard des navigateurs DOM Range API (document.createRange()).
🔗 Connexe : Aide-mémoire DOM Selection API
Créer une plage (Creating a Range)
const range = document.createRange();
Définir les limites (Setting Boundaries)
// Definir le debut et la fin via le noeud conteneur et le decalage offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Definir relativement aux elements environnants
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Selection rapide d'un noeud entier ou de son contenu
range.selectNode(node); // Inclut le noeud lui-meme
range.selectNodeContents(node); // Selectionne tous les noeuds enfants
Réduire les limites (Collapsing Boundaries)
range.collapse(true); // Reduire la plage au point de depart (curseur au debut)
range.collapse(false); // Reduire la plage au point d'arrivee (curseur a la fin)
console.log(range.collapsed); // true si le debut et la fin sont parfaitement identiques
Manipulation de contenu (Content Manipulation)
// Copier : renvoie un DocumentFragment sans modifier le DOM
const fragment = range.cloneContents();
// Couper : retire le contenu du DOM et renvoie un DocumentFragment
const extracted = range.extractContents();
// Supprimer : retire completement le contenu du DOM
range.deleteContents();
// Inserer un element au debut de la plage
range.insertNode(newNode);
// Entourer le contenu de la plage avec un element
range.surroundContents(document.createElement('mark'));
Propriétés en lecture seule (Read-Only Properties)
range.startContainer: Noeud ou commence la plage.range.startOffset: Nombre representant le decalage dans startContainer.range.endContainer: Noeud ou se termine la plage.range.endOffset: Nombre representant le decalage dans endContainer.range.commonAncestorContainer: Plus proche ancetre commun contenant le debut et la fin.range.toString(): Contenu textuel sous forme de chaine de caracteres.