dom-range.md

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