Guia rapido de referencia para a API padrao de navegadores DOM Range API (document.createRange()).
🔗 Relacionado: Folha de dicas do DOM Selection API
Criando um Range (Creating a Range)
const range = document.createRange();
Definindo limites (Setting Boundaries)
// Define inicio e fim por no de contencao e deslocamento offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Define em relacao aos elementos adjacentes
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Selecao rapida de um no inteiro ou de seus conteudos
range.selectNode(node); // Inclui o proprio no
range.selectNodeContents(node); // Seleciona todos os nos filhos
Colapso de limites (Collapsing Boundaries)
range.collapse(true); // Colapsa o intervalo para o inicio (cursor no comeco)
range.collapse(false); // Colapsa o intervalo para o fim (cursor no final)
console.log(range.collapsed); // true se os pontos de inicio e fim forem identicos
Manipulacao de conteudo (Content Manipulation)
// Copiar: retorna um DocumentFragment sem alterar o DOM
const fragment = range.cloneContents();
// Recortar: remove o conteudo do DOM e retorna DocumentFragment
const extracted = range.extractContents();
// Excluir: remove o conteudo completamente do DOM
range.deleteContents();
// Insere um elemento na posicao inicial do intervalo
range.insertNode(newNode);
// Envolve o conteudo do intervalo com um novo elemento
range.surroundContents(document.createElement('mark'));
Propriedades somente leitura (Read-Only Properties)
range.startContainer: No onde o intervalo comeca.range.startOffset: Numero representando o deslocamento em startContainer.range.endContainer: No onde o intervalo termina.range.endOffset: Numero representando o deslocamento em endContainer.range.commonAncestorContainer: No ancestral comum mais profundo de ambos os limites.range.toString(): Conteudo de texto dentro do intervalo como string.