DOM Range API Lathund

Snabbreferens foer webblasarens standardiserade DOM Range API (document.createRange()).

🔗 Relaterat: DOM Selection API Lathund

Skapa ett Range (Creating a Range)

const range = document.createRange();

---

Ange gränser (Setting Boundaries)

// Satt start och slut via nodbehållare och index-offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

// Satt relativt till omgivande element
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);

// Snabbmarkering av en hel nod eller dess innehall
range.selectNode(node);          // Inkluderar noden sjalv
range.selectNodeContents(node);  // Valjer alla underordnade noder i noden

---

Fälla ihop gränser (Collapsing Boundaries)

range.collapse(true);  // Fall ihop intervall till startpunkten (markor i borjan)
range.collapse(false); // Fall ihop intervall till slutpunkten (markor i slutet)
console.log(range.collapsed); // true om start- och slutpunkt ar identiska

---

Innehållsmanipulering (Content Manipulation)

// Kopiera: returnerar ett DocumentFragment utan att andra DOM
const fragment = range.cloneContents();

// Klipp ut: tar bort innehall fran DOM och returnerar DocumentFragment
const extracted = range.extractContents();

// Ta bort: raderar innehallet helt fran DOM
range.deleteContents();

// Infoga ett element vid intervallens startposition
range.insertNode(newNode);

// Omslut innehallet med ett element
range.surroundContents(document.createElement('mark'));

---

Skrivskyddade egenskaper (Read-Only Properties)

• range.startContainer: Nod dar intervallet borjar.
• range.startOffset: Offset-tal inuti startContainer.
• range.endContainer: Nod dar intervallet slutar.
• range.endOffset: Offset-tal inuti endContainer.
• range.commonAncestorContainer: Djupaste gemensamma forfader till bada behallarna.
• range.toString(): Textinnehallet inom intervallet som strang.