# Range
Range
接口表示一个包含节点与文本节点的一部分的文档片段。
# Range 对象获取方法
- 通过
document.createRange
方法来创建
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
注意:一旦一个 Range 对象被建立,在使用它的大多数方法之前需要去设置他的临界点。
- 通过
Selection.getRangeAt()
方法获取
这个方法是返回一个包含当前选区内容的区域对象。它是先有了文字内容选区 Selection
,然后才有了 Range
对象。
const SelectonObj = window.getSelection();
const range = SelectionObj.getRangeAt(index);
参数说明
range 返回的 range 对象
index 指定想要获取的子集编号(从 0 开始计数),如果该值大于或等于 rangeCount,将抛出错误。
Range()
构造函数获取
构造函数 Range()
返回一个新创建的 Range
对象,新创建的对象属于全局 Document
对象。
const range = new Range();
来看一个例子:
// html 部分
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
// js 部分
const paragraphs = document.querySelectorAll("p");
// 创建 Range 对象
const range = new Range();
// Range 起始位置在段落 2
range.setStartBefore(paragraphs[1]);
// Range 结束位置在段落 3
range.setEndAfter(paragraphs[2]);
// 获取 selection 对象
const selection = window.getSelection();
// 添加光标选择的范围
selection.addRange(range);
以上逻辑得到结果如下: