Selection：modify() 方法

modify(alter, direction, granularity)

<p>在这个示例中任意位置点击。然后点击下面的按钮来扩展选区，看看会发生什么！</p>
<p>
  微风穿过树梢，阳光在地面投下斑驳的影子。远处的街道上传来零星的脚步声，时间仿佛在这一刻慢了下来。人们在各自的生活中前行，有人匆忙，有人驻足，但世界依旧按照自己的节奏缓缓流动。
</p>

<label for="granularity">粒度：</label>
<select id="granularity">
  <option value="character">字符</option>
  <option value="word">单词</option>
  <option value="sentence">句子</option>
  <option value="line">行</option>
  <option value="paragraph">段落</option>
  <option value="lineboundary">行边界</option>
  <option value="sentenceboundary">句子边界</option>
  <option value="paragraphboundary">段落边界</option>
  <option value="documentboundary">文档边界</option>
</select>

<br /><br />

<button>扩展选区</button>

let select = document.querySelector("select");
let button = document.querySelector("button");

button.addEventListener("click", modify);

function modify() {
  let selection = window.getSelection();
  selection.modify("extend", "forward", select.value);
}