dom-range.md

   1 ---
   2 title: DOM Range
   3 category: JavaScript
   4 layout: 2017/sheet
   5 intro: |
   6   Quick reference to the HTML [DOM createRange API](https://devdocs.io/dom/range).
   7 ---
   8
   9 ## Reference
  10 {:.-three-column}
  11
  12 ### Creating ranges
  13
  14 ```js
  15 var range = document.createRange()
  16 ```
  17
  18 See: <https://devdocs.io/dom/document/createrange>
  19
  20 ## Methods
  21
  22 ```js
  23 range
  24   .setStart(startNode, startOffset)
  25   .setEnd(endNode, endOffset)
  26
  27   .setStartBefore(node)
  28   .setStartAfter(node)
  29   .setEndBefore(node)
  30   .setEndAfter(node)
  31
  32   .selectNode(node)
  33   .selectNodeContents(node)
  34 ```
  35
  36 See: <https://devdocs.io/dom/range>
  37
  38 ### Collapsing
  39
  40 ```js
  41 range.collapse() // to end (a single point)
  42 range.collapse(true) // to start (a single point)
  43 range.collapsed // true | false
  44 ```
  45
  46 ### Operations
  47
  48 ```js
  49 range.cloneContents() // copy => DocumentFragment
  50 range.extractContents() // cut  => DocumentFragment
  51 range.deleteContents() // delete
  52 ```
  53
  54 ```js
  55 range.insertNode(node)
  56 ```
  57
  58 ### String
  59
  60 ```js
  61 range.toString()
  62 ```
  63
  64 ### Read-only attributes
  65
  66 ```js
  67 range.collapsed //       => true/false
  68 range.startContainer //  => Node
  69 range.startOffset
  70 range.endContainer //    => Node
  71 range.endOffset
  72 range.commonAncestorContainer // closest of start and end containers
  73 ```