Selection: setBaseAndExtent() method

anchorNode

The node at the start of the selection.

anchorOffset

The number of child nodes from the start of the anchor node that should be excluded from the selection. So for example, if the value is 0 the whole node is included. If the value is 1, the whole node minus the first child node is included. And so on.

If anchorNode is a Text node, the offset refers to the number of characters from the start of the Node.textContent that should be excluded from the selection.

focusNode

The node at the end of the selection.

focusOffset

The number of child nodes from the start of the focus node that should be included in the selection. So for example, if the value is 0 the whole node is excluded. If the value is 1, the first child node is included. And so on.

If focusNode is a Text node, the offset refers to the number of characters from the start of the Node.textContent that should be included in the selection.

None (undefined).

IndexSizeError DOMException

Thrown if anchorOffset is larger than the number of child nodes inside anchorNode, or if focusOffset is larger than the number of child nodes inside focusNode.

In this example, we have two paragraphs containing spans, each one containing a single word. The first one is set as the anchorNode and the second is set as the focusNode. We also have an additional paragraph that sits in between the two nodes.

Next, we have two form inputs that allow you to set the anchorOffset and focusOffset — they both have a default value of 0.

We also have a button that when pressed invokes a function that runs the setBaseAndExtent() method with the specified offsets, and copies the selection into the output paragraph at the very bottom of the 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>

The JavaScript looks like so:

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;
  }
};

Play with the live example below, setting different offset values to see how this affects the selection.

• Selection