Ghid rapid de referinta pentru standardul DOM Range API (document.createRange()).
🔗 Conex: Ghid rapid DOM Selection API
Crearea unui Range (Creating a Range)
const range = document.createRange();
Setarea limitelor (Setting Boundaries)
// Seteaza inceputul si sfarsitul prin nod container si offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Seteaza relativ la elementele inconjuratoare
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Selectie rapida a unui nod intreg sau a continutului sau
range.selectNode(node); // Include nodul insusi
range.selectNodeContents(node); // Selecteaza toate nodurile copil
Restrangerea limitelor (Collapsing Boundaries)
range.collapse(true); // Restrange intervalul la punctul de start (cursor la inceput)
range.collapse(false); // Restrange intervalul la punctul final (cursor la sfarsit)
console.log(range.collapsed); // true daca inceputul si sfarsitul sunt identice
Manipularea continutului (Content Manipulation)
// Copiere: returneaza DocumentFragment fara modificarea DOM-ului
const fragment = range.cloneContents();
// Decupare: elimina continutul din DOM si returneaza DocumentFragment
const extracted = range.extractContents();
// Stergere: elimina complet continutul din DOM
range.deleteContents();
// Insereaza un nod la pozitia de start a intervalului
range.insertNode(newNode);
// Inconjoara continutul intervalului cu un element
range.surroundContents(document.createElement('mark'));
Proprietati doar pentru citire (Read-Only Properties)
range.startContainer: Nodul in care incepe intervalul.range.startOffset: Numar reprezentand offset-ul in startContainer.range.endContainer: Nodul in care se termina intervalul.range.endOffset: Numar reprezentand offset-ul in endContainer.range.commonAncestorContainer: Cel mai adanc stramos comun al ambelor containere.range.toString(): Continutul text din interiorul intervalului.