Selection
对象就是用户选择的文本范围或插入符号的位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。具有以下属性和方法。
1、anchorNode
只读属性,返回选区开始位置所属的节点。用户可能从左往右框选,也可能从右往左框选。但是锚点是不会移动的。(也就是鼠标按下所在的节点,如果没有选区,就是光标所在位置的节点)
2、anchorOffset
只读属性,返回选区的锚节点(anchorNode)起点偏移量的数字。返回值从零开始计数,如果选区从锚节点(anchorNode)的第一个字符开始,返回值为 0。
也就是鼠标按下时所在位置,到节点(ahchorNode)起始位置字符个数。
3、focusNode
只读属性,返回所选内容的结束位置部分所属的节点。
4、focusOffset
只读属性,返回选区终点在焦点(focusNode)中的偏移量(参考anchorOffset)。
5、isCollapsed
只读属性,返回一个布尔值用于描述选区的起点和终点是否在同一个位置(表明是否进行了框选)。
6、rangeCount
只读属性。这个值一般情况下都是1,除非在一个新打开的页面没有任何点击之前直接获取rangeCount才会是0。但是可以用js使选区包含多个range。
7、type
只读属性,有三个值。
None:当前没有任何选择。
Caret:选区已折叠,即光标在字符之间,没有任何选区。
Range:选择的是一个范围,即有选区。
8、getRangeAt()
方法,返回一个包含当前选区内容的区域对象。也就是range。range会在下面详细讲到。
9、collapse()
方法,可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面,则光标会在该处闪烁。
window.getSelection().collapse(parentNode, offset)
parentNode 光标落在的目标节点。
offset 落在节点的偏移量。
10、extend()
方法,移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点,不论方向。
sel.extend(node, offset)
node 目标节点。 offset 偏移位置,默认为0。
在这里,我写了一个定时器。图1 是页面刷新之后框选的内容,图2 是5秒之后框选的内容,可以看到,锚点没有发生移动,选中的焦点的位置发生了变化,到我传入的node节点上面。
11、modify()
方法,但是是非标准的,不建议在生产环境使用。这里不展开说。可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Selection/modify
12、collapseToStart()
方法,取消选区,并把光标定位在原选区的最开始处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在此处闪烁。
注意:这个方法并不会在乎框选的方向,无论你是从左往右,还是从右往左框选。
13、collapseToEnd()
方法,取消当前选区,并把光标定位在原选区的最末尾处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。
14、selectAllChildren()
方法,把指定元素的所有子元素设为选中区域,并取消之前的选中区域。
window.getSelection().selectAllChildren(parentNode)
所有 parentNode 元素的子元素会被设为选中区域,parentNode 本身除外。
15、addRange() removeRange() removeAllRanges() 是关于range的方法,另开一个单讲。
16、deleteFromDocument()
方法,从页面中删除选中的内容。
17、toString()
方法,返回当前选区的纯文本内容。
18、containsNode()
方法,判断某一个Node是否为当前选区的一部分。
标签:Selection,只读,getSelection,window,选区,选中,框选,节点,光标 From: https://www.cnblogs.com/junlinglife/p/17245732.html