浏览器中范围和选择之间的差异

Question

我想知道JavaScript中范围和选择对象之间的区别。

在我看来，你可以从这两者中获得相同的功能。在哪种情况下，您是否知道两者中哪一个使用？

Answer 1

根本区别在于Selection表示用户的选择，而Range表示文档的连续部分，与任何直观表示无关。 Selection可以（几乎）以零，一个或多个Range s表示，但也可以完全独立于选择创建和修改范围。

功能上存在一些重叠：例如，Selection的{​​{1}}相当于在其所有组件范围内调用deleteFromDocument()，您可以获得最多的边界最近使用deleteContents()，anchorNode，anchorOffset和focusNode属性在所选内容中选择了范围。但是，存在一些重要的差异：

• focusOffset可能包含多个范围。但是，目前支持此功能的唯一主要浏览器是Firefox。
• Selection可能是“向后”，我的意思是选择的结束边界（由Selection和focusNode表示）可能在文档中比开始更早出现边界（focusOffset和anchorNode）。范围没有方向。
• anchorOffset的工作方式不同。在大多数浏览器中（尽管特别是IE 9），在toString()对象上调用toString()仅返回所选的可见文本，而在Range上调用Selection将返回所有浏览器的串联范围内的文本节点，包括toString()元素中的节点和通过CSS隐藏的元素。