请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户按下鼠标左键不放并拖拽鼠标经过文字而产生。调用 window.getSelection() 方法可以获取 Selection 对象。
正如文本开头引用框所介绍的，你也可以在上面的文本段落中自行选择任意文本。上面介绍 Selection 对象的引用框集成有一个功能：用鼠标手动选择任意文本，都会弹出一个 alert 窗口，窗口上展现被选择文本的相关信息。功能的实现仅使用了一个方法：selection.toString()，该方法返回选区内的完整文本，toString 是转换为字符串的意思。
window.getSelection() 方法返回的是一个 Selection（选区）对象，该对象拥有如下主要属性：
- anchorNode ：只读，返回选区起点所在的节点（Node）。anchor是“锚”之意，指选区开始时的定位点（鼠标按下时的那个点）
- anchorOffset ：只读，返回选区起点在 anchorNode 中的位置偏移量。需要注意两种情形：
- 如果 anchorNode 是文本节点、注释节点，返回锚点（anchor）到该节点中第一个字的字符个数
- 如果 anchorNode 是元素节点，返回锚点（anchor）之前的同级节点总数
- focusNode ：只读，返回选区终点所在的节点。focus意味“焦点”，这里指选区起点到终点的高亮区域
- focusOffset ：只读，返回选区终点在 focusNode 中的位置偏移量。需要注意两种情形：
- 如果 focusNode 是文本节点、注释节点，返回焦点（focus）到该节点中的第一个字的字符个数
- 如果 focusNode 是元素节点，返回焦点（focus）之前的同级节点总数
- isCollapsed ：只读，返回布尔值，表示选区的起始点和终点是否在同一个位置
- ：只读，选区方向，返回forward（自左向右）或 backward（自右向左）
- rangeCount ：只读，返回选区所包含的连续范围（range）的数量
【注意】选区有方向（direction），可以自左向右或自右向左，取决于用户按下左键后往左或往右拖曳。选区的方向直接影响锚和焦点的位置，自左向右时锚前、焦点后，自右向左锚后、焦点前。
下面是获取选区对象属性值的简单演示：
请选择任意文本
这行是 id="mama" div 的p标签文本，里面有两个mark元素节点
这行是 div 标签，里面的内容是纯文本
选区（Selection）对象的主要方法则有：
- getRangeAt ：返回选区包含的指定区域（Range）的引用，即获取指定选区的范围
- collapse ：将当前的选区折叠为一个点
- extend ：将选区的焦点移动到一个特定的位置
- modify ：修改当前的选区
- collapseToStart ：将当前的选区折叠到起始点
- collapseToEnd ：将当前的选区折叠到最末尾的一个点
- selectAllChildren ：将某一指定节点的子节点框入选区
- addRange ：一个区域（Range）对象将被加入选区
- removeRange ：从选区中移除一个区域
- removeAllRanges ：将所有的区域都从选区中移除
- deleteFromDocument ：从页面中删除选区中的内容
- toString ：返回当前选区的纯文本内容
- containsNode ：判断某一个 Node 是否为当前选区的一部分
选区（Selection）对象的方法很多需要配合 range 对象使用，如开头随机选择选区就用上了 range 对象。下例仅演示 toStrong 和 delecteFromDocument 方法：
选择本此方框内的任意文本会获取所选择的文本然后删除掉，直至删完为止（选择后如果没有弹出alert窗口，请再单击一下此方框）。全部删除文本内容后可单击下方按钮重置。
【附】本文基于选区的核心JS代码（自动获取）
| 
发表于 2026-7-2 13:11
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2026-7-2 15:27
发表于 2026-7-2 23:05
。那就键盘支持，祝您安好！