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对象兼容各有不同,属于大坑,使用时多注意
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

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