Select range

Select range

1. To create a range we use the following.
   • var range = document.createRange()
2. Node selection is done simply with either of these two methods
   • range.selectNode(refNode) - selects a refNode including all its children.
   • range.selectNodeContents(refNode) - selects only the children of a refNode.
3. To create and select a range based on cursor position we can use this.
   • var sel = window.getSelection().
   • var range = sel.getRangeAt(0)
4. Whenever you create a range, a number of read-only properties are assigned to it.
   • startContainer - the parent of the first node in the selection.
   • startOffset - the number of characters skipped before the range starts if startContainer is a text node; otherwise it's the index of the first child node in the range.
   • endContainer - the parent of the last node in the selection.
   • endOffset - the number of characters skipped before the range ends if endContainer is a text node; otherwise it's the index of the last child node in the range.
   • commonAncestorContainer - the first node that contains both startContainer and endContainer.
5. These methods help you get more specific with your selections while still setting the properties for you.
   • range.setStartBefore(refNode)
   • range.setStartAfter(refNode)
   • range.setEndBefore(refNode)
   • range.setEndAfter(refNode)