Selection与Range 对象操作示例指南

前言

有些时候我们需要能够通过JavaScript访问页面的当前选择，已达成选择（取消选择）部分节点以从文档中删除所选内容或像文档中插入某些新内容。我们需要Range和Selction对象已达成我们的目的。

Range

选择的基本概念是Range，其本质是一对‘边界点’：范围起点和范围终点

我们可以通过Range对象来操作选择

    // 可以不传任何参数创建Range对象
    let range = new Range()
    
    // 可以通过设置开始和结束边界点来进行选择
    // 指定开始点
    range.setStart(node, offset)
    // 指定最大范围但不包括offset
    range.setEnd(node, offset)

选择部分文本

setStart和setEnd方法的第一个参数node可以是文本节点也可以是元素节点

当node是文本节点时，offset则必须是其文本中的位置

<p id="p">Hello</p> 
<script> 
let range = new Range(); 
range.setStart(p.firstChild, 2); 
range.setEnd(p.firstChild, 4); 
</script>

选择dom元素节点

当node是元素节点时，offset则必须是子元素的索引编号

当我们有如下dom结构并且以p为node节点时，对应的offset如图所示

<p>Test: <i>test1</i> and <b>test2</b> </p>
   | 0   |   1      | 2  |     3     |

range对象属性

我们在上面的示例中创建的 range 对象具有以下属性：

startContainer，startOffset —— 起始节点和偏移量，

endContainer，endOffset —— 结束节点和偏移量，

collapsed —— 布尔值，如果范围在同一点上开始和结束（所以范围内没有内容）则为 true，

commonAncestorContainer —— 在范围内的所有节点中最近的共同祖先节点，

编辑范围的方法

deleteContents() —— 从文档中删除范围中的内容

extractContents() —— 从文档中删除范围中的内容，并将删除的内容作为 DocumentFragment 返回

cloneContents() —— 复制范围中的内容，并将复制的内容作为 DocumentFragment 返回

insertNode(node) —— 在范围的起始处将 node 插入文档

surroundContents(node) —— 使用 node 将所选范围中的内容包裹起来。要使此操作有效，则该范围必须包含其中所有元素的开始和结束标签：不能像 <i>abc 这样的部分范围。

更多API

更多API及详细参数见 MDN Range

Selection

Range是用来管理选择范围的通用对象，但是新建一个Range对象并不一定会在文档上创建一个选择。 Selection对象是用来获取文档选择的。可以通过winodw.getSelection()或document.getSelection()来获取。一个选择可以包括零个或多个范围，但实际上除firefox允许同时选择多个范围，其他浏览器最多只能选择一个范围。

selection的属性

如前所述，理论上一个选择可能包含多个范围。我们可以使用下面这个方法获取这些范围对象：

getRangeAt(i) —— 获取第 i 个范围，i 从 0 开始。在除 Firefox 之外的所有浏览器中，仅使用 0。

与范围类似，选择的起点被称为“锚点（anchor）”，终点被称为“焦点（focus）”。

主要的选择属性有：

anchorNode —— 选择的起始节点，

anchorOffset —— 选择开始的 anchorNode 中的偏移量，

focusNode —— 选择的结束节点，

focusOffset —— 选择开始处 focusNode 的偏移量，

isCollapsed —— 如果未选择任何内容（空范围）或不存在，则为 true 。

rangeCount —— 选择中的范围数，除 Firefox 外，其他浏览器最多为 1。

selection锚点和焦点与range开始结束点的区别

selection的锚点可在选择的焦点之后，以表达从右向左选择，而range的开始点必须在结束点之前

selection API

更多详细API及其参数见 MDN Selection

以上就是Selection与Range 对象操作示例指南的详细内容，更多关于Selection Range 对象操作的资料请关注脚本之家其它相关文章！