前言
有些时候我们需要能够通过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 对象操作的资料请关注其它相关文章！
查看更多关于Selection与Range 对象操作示例指南的详细内容...