title: JavaScript DOM adding a range to window selection object
body: <p>I am adding a range to a selection object</p>
  
  <pre><code>var selection = window.getSelection();
  selection.addRange(range);
  </code></pre>
  
  <p>upon adding the same range on different pages the properties coming out for selection object are different.</p>
  
  <p>Desired selection Object</p>
  
  <pre><code>Selection {type: "Range", extentOffset: 1, extentNode: div#hiddenarea, baseOffset: 0, baseNode: div#hiddenarea…}
  </code></pre>
  
  <p>Undesired Selection Object</p>
  
  <pre><code>Selection {type: "Caret", extentOffset: 19, extentNode: text, baseOffset: 19, baseNode: text…}
  </code></pre>
  
  <p>what does selection type caret means and how can I set it as Range.</p>
  
  <p>As I Explored more I can see the problem is coming when we create selection object initially</p>
  
  <pre><code>var selection = window.getSelection();
  </code></pre>
  
  <p>Desired</p>
  
  <pre><code>selection: Selection
  anchorNode: null
  anchorOffset: 0
  baseNode: null
  baseOffset: 0
  extentNode: null
  extentOffset: 0
  focusNode: null
  focusOffset: 0
  isCollapsed: true
  rangeCount: 0
  type: "None"
  __proto__: Selection
  </code></pre>
  
  <p>Undesired </p>
  
  <pre><code>selection: Selection
  anchorNode: text
  anchorOffset: 19
  baseNode: text
  baseOffset: 19
  extentNode: text
  extentOffset: 19
  focusNode: text
  focusOffset: 19
  isCollapsed: true
  rangeCount: 1
  type: "Caret"
  __proto__: Selection
  </code></pre>