MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Selection.setBaseAndExtent()

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The setBaseAndExtent() method of the Selection interface sets the selection to be a range including all or parts of two specified DOM nodes, and any content located between them.

Syntax

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

Parameters

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.
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.

Note: If the focusNode appears before the anchorNode in the source, the two effectively swap roles, so anchor becomes focus and focus becomes anchor. In addition, the direction is reversed in such cases — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow. For example, Shift + ➡︎ would cause the selection to narrow from the beginning rather than grow at the end.

Return Value

Void.

Exceptions

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, an IndexSizeError exception is thrown.

Examples

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:

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

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

Note: You can find this example on GitHub (see it live also.)

Specifications

Specification Status Comment
Selection API
The definition of 'Selection.setBaseAndExtent()' in that specification.
Working Draft  

Browser compatibility

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)

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,