MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

Selection.setBaseAndExtent()

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

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

语法

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

参数

anchorNode
锚节点-选中内容的开始节点
anchorOffset
选中范围内起点位置在锚节点下第几个子节点的位置.例如,如果是值为0的话,整个节点都是被选中的. 如果值为1的话,那么至少整个节点至少有一个子节点被选中. 以此类推.
focusNode
焦点节点-选中内容的结尾节点
focusOffset
选中范围内结束位置在焦点节点下第几个子节点的位置.例如,如果是值为0的话,整个节点都是被选中的. 如果值为1的话,那么至少整个节点至少有一个子节点被选中. 以此类推.

Note: 如果源代码中焦点节点出现在锚节点之前的话, 这两个将在参数中互换位置, 也就是锚节点变为了焦点节点、焦点节点变为了锚节点. 另外, 这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾,这对于任何可能遵循这规则的键盘命令都是很重要的.例如, 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;
  }
}

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

Note: 实例在这里 example on GitHub (see it live also.)

规范

规范 状态 说明
Selection API
Selection.setBaseAndExtent()
Working Draft  

浏览器支持

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) 53 (53) ? ? (Yes)
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) 53.0 (53) ? ? (Yes)

相关链接

文档标签和贡献者

 此页面的贡献者: XyyF
 最后编辑者: XyyF,