选择：setBaseAndExtent() 方法

setBaseAndExtent() 方法是 Selection 接口的方法，它将选择设置为包含两个指定 DOM 节点的所有或部分内容以及它们之间存在的任何内容的范围。

如果浏览器支持，锚点节点和焦点节点可以位于影子树中。

语法

setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)

参数

anchorNode

选择开始处的节点。

anchorOffset

从锚点节点的开始处应从选择中排除的子节点数。例如，如果值为 0，则包含整个节点。如果值为 1，则包含整个节点减去第一个子节点。依此类推。

如果 anchorNode 是一个 Text 节点，则偏移量指的是从 Node.textContent 的开始处应从选择中排除的字符数。

focusNode

选择结束处的节点。

focusOffset

从焦点节点的开始处应包含在选择中的子节点数。例如，如果值为 0，则排除整个节点。如果值为 1，则包含第一个子节点。依此类推。

如果 focusNode 是一个 Text 节点，则偏移量指的是从 Node.textContent 的开始处应包含在选择中的字符数。

注意：如果焦点位置在文档中出现在锚点位置之前，则选择的方向将反转 - 光标将放置在文本的开头而不是结尾，这对于任何可能随之而来的键盘命令都很重要。例如，Shift + ➡︎ 将导致选择从开头缩小而不是从结尾增长。

返回值

无 (undefined).

异常

IndexSizeError DOMException: 如果 anchorOffset 大于 anchorNode 内的子节点数，或者 focusOffset 大于 focusNode 内的子节点数，则抛出此异常。

示例

在此示例中，我们有两个包含跨度的段落，每个跨度包含一个单词。第一个设置为 anchorNode，第二个设置为 focusNode。我们还有一个额外的段落位于这两个节点之间。

接下来，我们有两个表单输入，允许您设置 anchorOffset 和 focusOffset - 它们都有一个默认值 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>

注意：在 <p class="one"> 和 <p class="two"> 开始标签以及跟随它们的 <span> 开始标签之间有意没有空格 - 为了避免出现会影响预期子节点数量的文本节点。（即使这些文本节点仅为空格，它们仍然是额外的子节点；从 Node.firstChild 示例中了解更多信息）。

JavaScript 代码如下所示

const one = document.querySelector(".one");
const two = document.querySelector(".two");

const aOffset = document.getElementById("aOffset");
const fOffset = document.getElementById("fOffset");

const button = document.querySelector("button");

const output = document.querySelector(".output");

let selection;

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

使用下面的实时示例进行尝试，设置不同的偏移量值，看看这将如何影响选择。

注意：您可以在 GitHub 上找到此示例 (也可以在线查看.)

规范

规范
选择 API # dom-selection-setbaseandextent

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

选择