【发布时间】：2011-07-31 04:34:21
【问题描述】：
我想知道 JavaScript 中范围和选择对象之间的区别。
在我看来，您可以从这两者中的任何一个中获得相同的功能。在哪种情况下，您知道要使用两者中的哪一个？
【问题讨论】：
标签： javascript html browser selection range
【发布时间】：2011-07-31 04:34:21
【问题描述】：
根本区别在于Selection 代表用户的选择，而Range 代表文档的连续部分独立于任何视觉表示。 Selection 可以（几乎）用零、一个或多个Ranges 表示，但范围也可以完全独立于选择来创建和修改。
功能上有一些重叠：比如Selection的deleteFromDocument()相当于在其所有组件Range上调用deleteContents()，可以在选择中获取最近选中的Range的边界使用anchorNode、anchorOffset、focusNode 和focusOffset 属性。但是，有一些关键的区别：
-
Selection可能包含多个范围。但是，目前唯一支持此功能的主要浏览器是 Firefox。 -
Selection可能是“向后”，我的意思是选择的结束边界（由focusNode和focusOffset表示）可能出现在文档中比开始边界（anchorNode和anchorOffset)。 Range 没有方向。 -
toString()工作方式不同。在大多数浏览器中（虽然不是 IE 9），在Selection对象上调用toString()只返回被选中的可见文本，而在 Range 上调用toString()将返回范围内所有文本节点的串联，包括<script>元素和通过 CSS 隐藏的元素。
【讨论】：
-
我看不出 toString 方法的结果有多大区别。它为选择对象和范围对象打印出相同的结果。
-
@ParamSingh：我认为这可能仍因浏览器而异。例如，请参阅 Chrome 中的 jsbin.com/buhuvuworu/edit?html,js,output。
-
我制作了一个demo 来分别演示选择与范围的视觉表示的依赖性与独立性。
-
最大的不同是 Selection.toString() 将保留/插入元素之间的空白，而 Range.toString() 只是连接文本节点。这意味着兄弟元素内的文本节点将被连接起来，没有额外的空格。