Selection对象方法属性总结

用途

在浏览器环境中,可以使用document.getSelection方法获取到Selection对象,Selection对象常用于编辑器等光标操作,用于选取文字段落或者定位光标选取范围内的节点或者文字操作;

重点划线

  1. 锚点(anchor)

锚指的是一个选区的起始点(不同于HTML中的锚点链接,译者注)。当我们使用鼠标框选一个区域的时候,锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时,锚点是不会变的;(归纳为范围选取时开始选取的位置)

  1. 焦点(focus)

选区的焦点是该选区的终点,当您用鼠标框选一个选区的时候,焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标,焦点的位置会随着改变。(归纳为范围选取时结束的位置)

  1. 范围(range)

范围指的是文档中连续的一部分。一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。用户通常下只能选择一个范围,但是有的时候用户也有可能选择多个范围(例如当用户按下Control按键并框选多个区域时,Chrome中禁止了这个操作,译者注)。“范围”会被作为range
对象返回。Range对象也能通过DOM创建、增加、删减。range对象也是Selection对象中的重点。

属性

  1. anchorNode

返回该选区起点所在的节点(Node
)。
2.anchorOffset
返回一个数字,其表示的是选区起点在 anchorNode
中的位置偏移量。
如果 anchorNode 是文字节点,那么返回的就是从该文字节点的第一个字开始,直到被选中的第一个字之间的字数(如果第一个字就被选中,那么偏移量为零)。
如果 anchorNode 是一个元素,那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)

  1. focusNode

返回该选区终点所在的节点。

  1. focusOffset

返回一个数字,其表示的是选区终点在 focusNode
中的位置偏移量。
如果 focusNode 是文字节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从0开始计),就返回它。
如果 focusNode 是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。

  1. isCollapsed

返回一个布尔值,用于判断选区的起始点和终点是否在同一个位置。(也就是说可以用来判断时范围选取还是单个焦点)

  1. rangeCount

返回改选去所包含的连续范围的数量。(意义不大,在Chrome浏览器中只能有一个选区存在)

方法

  1. getRangeAt

获取当前Selection对象下的range对象,rang对象在焦点操作中尤为重要(下一篇文章主要总结range对象)

  1. collapse(parentNode, offset)

将范围选区折叠为一个点
parentNode 光标落在的目标节点
offset 焦点偏移量

  1. extend(node,offset)

貌似兼容性不太友好 而且没用过,了解后再总结

  1. 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");
  1. collapseToStart()

此方法的作用是取消当前选区,并把光标定位在原选区的最开始处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。

  1. collapseToEnd()

同上至结尾处

  1. selectAllChildren(node)
    将一个节点的所有子节点包含进范围选区
    Examples:
footer = document.getElementById("footer");
window.getSelection().selectAllChildren(footer);
/* Everything inside the footer is now selected *
  1. addRange(range)

向选区中添加一个区域
range可通过document.createRange()创建

  1. 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对象兼容各有不同,属于大坑,使用时多注意
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:Range对象的概念 Range对象代表页面上一段连续的区域,通过Range对象可以获取或者修改页面上任何区域...
    便U_Life阅读 18,761评论 6 28
  • 前言 之前看quill源码(一个富文本编辑器)的时候第一次接触Range与Selection对象,之前也写过一篇文...
    梁王io阅读 5,208评论 0 1
  • 《欢乐颂2》最后一集,五美都何去何从? 安迪情归小包总,曲筱绡缘定赵医生,关关等待着谢童,邱莹莹即将嫁给应勤。四个...
    黛小瓦阅读 2,675评论 0 1
  • 作者依照“算法为万物本源”,这一主要思想对未来展开了相关的推测,涉及到方面很多,让我不禁感叹作者的知识面之广阔。众...
    range阅读 1,300评论 0 1
  • 今天坐在去武都的大巴车上,中途上来十个人,拿着很多行李。我本来是一个人坐在最前排的,心理上并不想有人坐我...
    星星花瓣阅读 3,222评论 0 0