window.getSelection(),返回一个Selection对象,表示用户选择的文本范围或光标的当前位置。

selection对象
先来看下面两个selection结果:
selection对象一:

selection对象二:

很奇怪,为什么同样选中一段文字,为什么selection对象的属性会不一样呢?
那就需要明确一下Selection对象的各个属性的意义了。

术语
锚点(anchor)
锚指的是一个选区的起始点。当我们使用鼠标选择一个区域的时候,锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时,锚点是不会变的。

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

范围(range)
范围指的是文档中连续的一部分。一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。用户通常下只能选择一个范围。“范围”会被作为range对象返回。Range对象也能通过DOM创建、增加、删减。

属性
anchorNode
返回该选区起点所在的节点

anchorOffset
返回一个数字,表示该选区起点在anchorNode中的位置偏移量。

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

focusOffset
返回一个数字,表示该选区终点在focusNode中的位置偏移量。

如果 focusNode 是文字节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从0开始计),就返回它。
如果 focusNode 是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
isCollapsed
返回一个布尔值,用于判断选区的起始点和终点是否在同一位置。

rangeCount
返回一个数字,表示该选区所包含的连续范围的数量。一般为1,因为通常情况下用户只能选择一个范围。

方法
getRangeAt
返回选区开始的节点(Node)。
因为通常情况下用户只能选择一个范围,所以只有一个选区(range),此方法一般为getRangeAt(0)

collapse(光标落在的目标节点, offset)
将当前的选区折叠为一个点

extend
将选区的焦点移动到一个特定的位置。

modify
修改当前的选区。

collapseToStart
将当前的选区折叠到起始点。

collapseToEnd
将当前的选区折叠到最末尾的一个点。

selectAllChildren
将某一指定节点的子节点框入选区

addRange
一个区域(Range)对象将被加入选区。

removeRange
从选区中移除一个区域。

removeAllRanges
将所有的区域都从选区中移除。

deleteFromDocument
从页面中删除选区中的内容。

selectionLanguageChange
当键盘的朝向发生改变后修改指针的Bidi优先级。

toString
返回当前选区的纯文本内容。

containsNode
判断某一个node是否为当前选区的一部分。

所以现在就可以明白为什么同样选中一段文字,Selection对象不一样了吧?
用户可能从左到右(与文档方向相同)选择文本或从右到左(与文档方向相反)选择文本。anchor指向用户开始选择的地方,而focus指向用户结束选择的地方。
————————————————
版权声明:本文为CSDN博主「xiao xu」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42420703/article/details/84892528

关于window.getSelection的更多相关文章

  1. window.getSelection和document.selection

    window.getSelection和document.selection   IE9以下支持:document.selection IE9.Firefox.Safari.Chrome和Opera支 ...

  2. document.selection window.getSelection()

    IE9以下支持:document.selection  IE9.Firefox.Safari.Chrome和Opera支持:window.getSelection() 屏幕取词 function ge ...

  3. 使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题(高亮后不能正确获取)

    如果没有高亮等复杂处理,只需要获取一段文字中选取的字和位置,那么 使用window.getSelection()获取div中选中文字内容及位置 怎么获取textarea中选中文字 则可以满足需求: - ...

  4. 使用window.getSelection()获取div中选中文字内容及位置

    div添加一个弹出事件: $(document).ready(function () { $("#marked-area").mouseup(function (e) { $sco ...

  5. BOM 浏览器对象模型_window 对象的常见 window.属性_window.方法

    1. 常用属性 window.devicePixelRatio        像素比 = css / 物理像素 window.scrollX,window.scrollY    滚动条 卷曲距离 if ...

  6. window备忘录

    1.window.name属性是一个字符串,表示当前窗口的名字,只有当浏览器窗口关闭的时候,此属性才会消失. 2.window.closed属性返回一个布尔值,表示窗口是否关闭.此属性一般用来检查使用 ...

  7. JavaScript (JS)基础:BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

  8. 【uwp】浅谈China Daily 中划词翻译的实现

    学习uwp开发也有一段时间了,最近上架了一个小应用(China Daily),现在准备将开发中所学到的一些东西拿出来跟大家分享交流一下. 先给出应用的下载链接:China Daily , 感兴趣的童鞋 ...

  9. FastClick 填坑及源码解析

    最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时,光标点击总是不好定位到正确的位置: 如上图,具体表现是较快点击时,光标总会跳到 textarea 内容的尾部.只 ...

随机推荐

  1. Restart container within pod

    https://stackoverflow.com/questions/46123457/restart-container-within-pod 命令 kubectl exec -it [POD_N ...

  2. Python网络编程、爬虫之requests模块使用

    一.python操作网络,也就是打开一个网站,或者请求一个http接口,使用urllib模块. urllib模块是一个标准模块,直接import urllib即可,在python3里面只有urllib ...

  3. Java基础篇(下)

    6.Java面向对象的三个特征与含义 三大特征是:继承.封装和多态. (1)继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得 ...

  4. Django---图书管理系统,多对多(ManyToMany),request获取多个值getlist(),反查(被关联的对象.author_set.all)

    Django---图书管理系统,多对多(ManyToMany),request获取多个值getlist(),反查(被关联的对象.author_set.all) 一丶多对多查询 表建立多对多关系的方式 ...

  5. React 的setState 理解

    我们都知道在React中,setState() 方法是用来改变组件状态的,在项目中也一直用,也没有出现什么问题(使用方法太简单了),但今天看了一篇文章,提到了setState 使用时的两个注意点,加深 ...

  6. JavaScript数据类型和语法

    第一章 类型 1.2 内置类型 使用 typeof 检测对象类型并不是非常安全的行为: // 安全的 typeof undefined // 'undefined' typeof true // 'b ...

  7. 面试题:什么叫平衡二叉查找树--AVL树

    查找.插入和删除在平均和最坏情况下都是O(log n) 增加和删除可能需要通过一次或多次树旋转来重新平衡这个树 节点的平衡因子是它的左子树的高度减去它的右子树的高度.带有平衡因子 1.0 或 -1 的 ...

  8. Ubuntu下映射网络驱动器

    Ubuntu下映射网络驱动器https://www.linuxidc.com/Linux/2013-07/86928.htm linux下samba访问路径: smb://192.168.1.111/ ...

  9. NGINX PHP 报错整理合集

    NGINX PHP "No input file specified" 修改php.ini conf cgi.fix_pathinfo=1; 修改nginx.conf,中的fast ...

  10. MySQL Execution Plan--将范围扫描转换为等值查询

    将大于或小于的范围查询装换为等值查询 在生产环境,经常会遇到需要对Worker表进行多次尝试的业务,超过一定重试次数后抛弃或使用其他方式处理,在查找满足重试条件数据时,通常会使用“小于”运算符并伴随排 ...