Guia rapida de referencia para la API estandar del navegador DOM Range API (document.createRange()).
🔗 Relacionado: Hoja de referencia de DOM Selection API
Crear un Range (Creating a Range)
const range = document.createRange();
Establecer limites (Setting Boundaries)
// Establecer inicio y fin por contenedor de nodo y desplazamiento offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Establecer relativo a elementos circundantes
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Seleccion rapida de un nodo completo o de sus contenidos
range.selectNode(node); // Incluye el propio nodo
range.selectNodeContents(node); // Selecciona todos los nodos hijos dentro del nodo
Colapsar limites (Collapsing Boundaries)
range.collapse(true); // Colapsar rango al punto de inicio (cursor al principio)
range.collapse(false); // Colapsar rango al punto final (cursor al final)
console.log(range.collapsed); // true si los puntos de inicio y fin son identicos
Manipulacion de contenido (Content Manipulation)
// Copiar: devuelve DocumentFragment sin modificar el DOM
const fragment = range.cloneContents();
// Cortar: elimina el contenido seleccionado del DOM y devuelve DocumentFragment
const extracted = range.extractContents();
// Eliminar: remueve el contenido completamente del DOM
range.deleteContents();
// Insertar un elemento en la posicion inicial del rango
range.insertNode(newNode);
// Envolver el contenido del rango con un elemento contenedor
range.surroundContents(document.createElement('mark'));
Propiedades de solo lectura (Read-Only Properties)
range.startContainer: Nodo donde comienza el rango.range.startOffset: Numero que representa el desplazamiento en startContainer.range.endContainer: Nodo donde termina el rango.range.endOffset: Numero que representa el desplazamiento en endContainer.range.commonAncestorContainer: Nodo ancestro comun mas profundo que contiene ambos extremos.range.toString(): Contenido de texto del rango como cadena.