Advanced select & remove from range

Advanced select & remove from range

1. When a range is created, internally it creates a document fragment node onto which all the nodes in the selection are attached.
   • var range = document.createRange();
2. We can set a range with more precision by selecting only parts of nodes using the following.
   • Range.setStart(refNode, startOffset)
     • refNode - the node that starts the selection.
     • startOffset - the number of chars skipped before the range starts if it's a text node; otherwise it's index of the first child node in the range.
   • Range.setEnd(refNode, endOffset)
     • refNode - the node that ends the selection.
     • endOffset - the number of chars skipped before the range ends if it's a text node; otherwise it's index of the last child node in the range.
3. With the document fragment created, we can delete, extract, or clone the contents of the range using a variety of methods.
   • Range.deleteContents() - removes and discards the contents of the range from the document.
   • Range.extractContents() - removes and copies the contents of the range from the document.
   • Range.cloneContents() - leaves the fragment in place but creates a copy that can be inserted elsewhere.