用途
在浏览器环境中,可以使用document.getSelection方法获取到Selection对象,Selection对象常用于编辑器等光标操作,用于选取文字段落或者定位光标选取范围内的节点或者文字操作;
重点划线
- 锚点(anchor)
锚指的是一个选区的起始点(不同于HTML中的锚点链接,译者注)。当我们使用鼠标框选一个区域的时候,锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时,锚点是不会变的;(归纳为范围选取时开始选取的位置)
- 焦点(focus)
选区的焦点是该选区的终点,当您用鼠标框选一个选区的时候,焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标,焦点的位置会随着改变。(归纳为范围选取时结束的位置)
- 范围(range)
范围指的是文档中连续的一部分。一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。用户通常下只能选择一个范围,但是有的时候用户也有可能选择多个范围(例如当用户按下Control按键并框选多个区域时,Chrome中禁止了这个操作,译者注)。“范围”会被作为range
对象返回。Range对象也能通过DOM创建、增加、删减。range对象也是Selection对象中的重点。
属性
- anchorNode
返回该选区起点所在的节点(Node
)。
2.anchorOffset
返回一个数字,其表示的是选区起点在 anchorNode
中的位置偏移量。
如果 anchorNode 是文字节点,那么返回的就是从该文字节点的第一个字开始,直到被选中的第一个字之间的字数(如果第一个字就被选中,那么偏移量为零)。
如果 anchorNode 是一个元素,那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)
- focusNode
返回该选区终点所在的节点。
- focusOffset
返回一个数字,其表示的是选区终点在 focusNode
中的位置偏移量。
如果 focusNode 是文字节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从0开始计),就返回它。
如果 focusNode 是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
- isCollapsed
返回一个布尔值,用于判断选区的起始点和终点是否在同一个位置。(也就是说可以用来判断时范围选取还是单个焦点)
- rangeCount
返回改选去所包含的连续范围的数量。(意义不大,在Chrome浏览器中只能有一个选区存在)
方法
- getRangeAt
获取当前Selection对象下的range对象,rang对象在焦点操作中尤为重要(下一篇文章主要总结range对象)
- collapse(parentNode, offset)
将范围选区折叠为一个点
parentNode 光标落在的目标节点
offset 焦点偏移量
- extend(node,offset)
貌似兼容性不太友好 而且没用过,了解后再总结
- modify(alter,direction,granularity)
操作扩展当前选区
alter
改变类型. 传入"move"来移动光标位置,或者"extend"来扩展当前选区。
direction
调整选区的方向。你可以传入"forward"或"backward"来根据选区内容的语言书写方向来调整。或者使用"left"或"right"来指明一个明确的调整方向。
granularity
调整的距离颗粒度。可选值有"character"、"word"、"sentence"、"line"、"paragraph"、"lineboundary"、"sentenceboundary"、"paragraphboundary"、"documentboundary"。
Examples:
var selection = window.getSelection();
selection.modify("extend", "forward", "word");
- collapseToStart()
此方法的作用是取消当前选区,并把光标定位在原选区的最开始处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。
- collapseToEnd()
同上至结尾处
- selectAllChildren(node)
将一个节点的所有子节点包含进范围选区
Examples:
footer = document.getElementById("footer");
window.getSelection().selectAllChildren(footer);
/* Everything inside the footer is now selected *
- addRange(range)
向选区中添加一个区域
range可通过document.createRange()创建
- removeRange(range)
删除一个区域
/* 通过设计一段js代码,我们可以获得多个区域,
* 这段代码可以移除除了第一个区域之外的所有区域。
* (此代码在Chrome中不生效,因为Chrome当中只能
* 选择一个选区,哎我为什么要在 Mozilla 的网站上
* 说这个?译者注)*/
s = window.getSelection();
if(s.rangeCount > 1) {
for(var i = 1; i < s.rangeCount; i++) {
s.removeRange(s.getRangeAt(i));
}
}```
10. deleteFromDocument()
> 将选区范围内的文档片段直接删除
11. toString()
> 返回当前选区的纯文本内容。
12. containsNode(aNode,aPartlyContained)
> 判断某一个node是否为当前选区的一部分。
aNode
用于判断是否包含在Selection中的那个节点
aPartlyContained
当此参数为true时, 当selection包含节点aNode的一部分或全部时,containsNode()返回true.
当此参数为false时, 只有当selection完全包含节点aNode时,containsNode() 才返回true.
13. selectionLanguageChange()
> 当键盘的朝向发生改变后修改指针的Bidi优先级。??? 看不懂
# 最后
各个浏览器对Selection对象兼容各有不同,属于大坑,使用时多注意