Selection.setBaseAndExtent()

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

setBaseAndExtent() 方法是 Selection 接口用来选中并设置在两个特定的 DOM 节点中文本选中的范围，并且选中的任何内容都位于两个节点之间。

语法

sel.setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

参数

anchorNode

锚节点 - 选中内容的开始节点

anchorOffset

选中范围内起点位置在锚节点下第几个子节点的位置。例如，如果是值为 0 的话，整个节点都是被选中的。如果值为 1 的话，那么至少整个节点至少有一个子节点被选中。以此类推。

focusNode

焦点节点 - 选中内容的结尾节点

focusOffset

选中范围内结束位置在焦点节点下第几个子节点的位置。例如，如果是值为 0 的话，整个节点都是被选中的。如果值为 1 的话，那么至少整个节点至少有一个子节点被选中。以此类推。

备注： 如果源代码中焦点节点出现在锚节点之前的话，这两个将在参数中互换位置，也就是锚节点变为了焦点节点、焦点节点变为了锚节点。另外，这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾，这对于任何可能遵循这规则的键盘命令都是很重要的。例如，Shift + ➡︎ 会使选中状态范围的从开始缩小，而不是在结尾增加。

返回值

Void.

说明

如果锚偏移值超过了锚节点内部的子节点个数，或则如果焦点偏移值超过了焦点节点内部的子节点个数，这个IndexSizeError 选中会被丢弃。

示例

一个例子，我们有两个包含多个 span 的段落，每一个 span 包含一个单词。然后第一个段落作为锚节点并且第二个作为焦点节点.我们还有一个额外的段落插入在两个节点之间。

然后，这里有两个允许你去设置锚节点和焦点节点的表单输入框 — 它们都有一个默认值为 0.

这里还有一个按钮用来点击调用运行包含setBaseAndExtent()方法的函数，最后输出选中内容到 HTML 的最底部。

<h1>setBaseAndExtent example</h1>
<div>
  <p class="one"><span>Fish</span><span>Dog</span><span>Cat</span><span>Bird</span></p>
  <p>MIDDLE</p>
  <p class="two"><span>Car</span><span>Bike</span><span>Boat</span><span>Plane</span></p>
</div>

<div>
  <p>
    <label for="aOffset">Anchor offset</label>
    <input id="aOffset" name="aOffset" type="number" value="0">
  </p>
  <p>
    <label for="fOffset">Focus offset</label>
    <input id="fOffset" name="fOffset" type="number" value="0">
  </p>
  <p><button>Capture selection</button></p>
</div>

<p><strong>Output</strong>: <span class="output"></span></p>

JavaScript 像这样：

var one = document.querySelector('.one');
var two = document.querySelector('.two');

var aOffset = document.getElementById('aOffset');
var fOffset = document.getElementById('fOffset');

var button = document.querySelector('button');

var output = document.querySelector('.output');

var selection;

button.onclick = function() {
  try {
    selection = document.getSelection();
    selection.setBaseAndExtent(one, aOffset.value, two, fOffset.value);
    var text = selection.toString();
    output.textContent = text;
  } catch(e) {
    output.textContent = e.message;
  }
}

在下面在线运行实例，设置不同的偏移值去观察它怎么去影响选中内容的。

备注： 实例在这里 example on GitHub (see it live also.)

规范

Specification
Selection API
# dom-selection-setbaseandextent

浏览器兼容性

BCD tables only load in the browser

相关链接