Selection.setBaseAndExtent()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

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

语法

js
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)

参数

anchorNode

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

anchorOffset

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

focusNode

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

focusOffset

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

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

返回值

Void.

说明

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

示例

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

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

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

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 像这样:

js
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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setBaseAndExtent
Accepts anchorNode and focusNode arguments in different shadow trees
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

相关链接