Dom Range Cheat Sheet

From WikiOD

Here is the cheatsheat of Dom Range and basic guide on how to use Dom Range

Reference[edit | edit source]

{:.-three-column}

Creating ranges[edit | edit source]

var range = document.createRange()

See: https://devdocs.io/dom/document/createrange

Methods[edit | edit source]

range
  .setStart(startNode, startOffset)
  .setEnd(endNode, endOffset)

  .setStartBefore(node)
  .setStartAfter(node)
  .setEndBefore(node)
  .setEndAfter(node)

  .selectNode(node)
  .selectNodeContents(node)

See: https://devdocs.io/dom/range

Collapsing[edit | edit source]

range.collapse() // to end (a single point)
range.collapse(true) // to start (a single point)
range.collapsed // true | false

Operations[edit | edit source]

range.cloneContents() // copy => DocumentFragment
range.extractContents() // cut  => DocumentFragment
range.deleteContents() // delete
range.insertNode(node)

String[edit | edit source]

range.toString()

Read-only attributes[edit | edit source]

range.collapsed //       => true/false
range.startContainer //  => Node
range.startOffset
range.endContainer //    => Node
range.endOffset
range.commonAncestorContainer // closest of start and end containers

Credit:rstacruz