Difference between range and selection in browser

Question

I wanted to know the difference between the range and the selection object in JavaScript.

It appears to me that you could get the same functionality out of either of these two. In which case are there are any specific circumstances where you know which of the two to use?

Answer 1

The fundamental difference is that a Selection represents the user's selection, while Range represents a continuous part of a document independently of any visual representation. A Selection can (almost) be expressed in terms of zero, one or more Ranges but Ranges can also be created and modified completely independently of the selection.

There is some overlap in functionality: for example, Selection's deleteFromDocument() is equivalent to calling deleteContents() on all of its component Ranges, and you can get the boundaries of the most recently selected Range in the selection using the anchorNode, anchorOffset, focusNode and focusOffset properties. However, there are some crucial differences:

• A Selection may contain multiple Ranges. However, the only major browser to support this currently is Firefox.
• A Selection may be "backwards", by which I mean that the end boundary of the selection (represented by focusNode and focusOffset) may occur earlier in the document than the start boundary (anchorNode and anchorOffset). A Range has no direction.
• toString() works differently. In most browsers (although notably not IE 9), calling toString() on a Selection object returns only the visible text that is selected, while calling toString() on a Range will return a concatenation of all text nodes within the range, including those within <script> elements and elements hidden via CSS.