Выбор: метод setBaseAndExtent()

Метод setBaseAndExtent() интерфейса Selection устанавливает выделение в виде диапазона, включающего все или части двух указанных узлов DOM, а также любой контент, расположенный между ними.

Якорные и фокусные узлы могут быть расположены в тенистом дереве, если это поддерживается браузером.

anchorNode

Узел, с которого начинается выделение.

anchorOffset

Количество дочерних узлов от начала якорного узла, которые должны быть исключены из выделения. Например, если значение равно 0, весь узел включается. Если значение равно 1, весь узел минус первый дочерний узел включается. И так далее.

Если anchorNode является узлом Text, смещение относится к количеству символов от начала Node.textContent, которые должны быть исключены из выделения.

focusNode

Узел, по которому заканчивается выделение.

focusOffset

Количество дочерних узлов от начала фокусного узла, которые должны быть включены в выделение. Например, если значение равно 0, весь узел исключается. Если значение равно 1, первый дочерний узел включается. И так далее.

Если focusNode является узлом Text, смещение относится к количеству символов от начала Node.textContent, которые должны быть включены в выделение.

None (undefined).

IndexSizeError DOMException

Выбрасывается, если anchorOffset больше, чем количество дочерних узлов внутри anchorNode, или если focusOffset больше, чем количество дочерних узлов внутри focusNode.

В этом примере у нас есть два абзаца, содержащие теги span, каждый из которых содержит одно слово. Первый абзац задан как anchorNode, а второй — как focusNode. У нас также есть дополнительный абзац, который находится между двумя узлами.

Далее у нас есть два поля ввода формы, которые позволяют задать anchorOffset и focusOffset — оба имеют значение по умолчанию 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 выглядит следующим образом:

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

Поиграйте с живым примером ниже, устанавливая различные значения смещений, чтобы увидеть, как это влияет на выделение.

• Selection