Szybki przewodnik po standardowym interfejsie DOM Range API (document.createRange()).
🔗 Powiązane: Ściągawka z DOM Selection API
Tworzenie obiektu Range (Creating a Range)
const range = document.createRange();
Ustawianie granic (Setting Boundaries)
// Ustawianie poczatku i konca przez wezel i przesuniecie offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Ustawianie wzgledem sasiadujacych elementow
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Szybki wybor calego wezla lub jego zawartosci
range.selectNode(node); // Obejmuje sam wezel
range.selectNodeContents(node); // Wybiera wszystkie wezly potomne
Zwijanie granic (Collapsing Boundaries)
range.collapse(true); // Zwin zakres do poczatku (karetka na poczatku)
range.collapse(false); // Zwin zakres do konca (karetka na koncu)
console.log(range.collapsed); // true, jesli poczatek i koniec sa identyczne
Manipulacja zawartością (Content Manipulation)
// Kopiuj: zwraca DocumentFragment bez modyfikacji DOM
const fragment = range.cloneContents();
// Wytnij: usuwa zawartosc z DOM i zwraca DocumentFragment
const extracted = range.extractContents();
// Usun: calkowicie usuwa zawartosc z DOM
range.deleteContents();
// Wstawia wezel na poczatku zakresu
range.insertNode(newNode);
// Otacza zawartosc zakresu nowym elementem
range.surroundContents(document.createElement('mark'));
Właściwości tylko do odczytu (Read-Only Properties)
range.startContainer: Wezel, w ktorym zaczyna sie zakres.range.startOffset: Liczba reprezentujaca przesuniecie w startContainer.range.endContainer: Wezel, w ktorym konczy sie zakres.range.endOffset: Liczba reprezentujaca przesuniecie w endContainer.range.commonAncestorContainer: Najglebszy wspolny przodek zawierajacy oba wezly.range.toString(): Zawartosc tekstowa wewnatrz zakresu jako ciag znakow.