Selection: setBaseAndExtent() Methode

Syntax

setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)

Parameter

anchorNode

Der Knoten am Anfang der Auswahl.

anchorOffset

Die Anzahl der Kindknoten vom Anfang des Ankerknotens, die von der Auswahl ausgeschlossen werden sollen. Wenn der Wert 0 ist, wird der gesamte Knoten eingeschlossen. Wenn der Wert 1 ist, wird der ganze Knoten minus des ersten Kindknotens eingeschlossen. Und so weiter.

Wenn anchorNode ein Text-Knoten ist, bezieht sich der Offset auf die Anzahl der Zeichen vom Anfang des Node.textContent, die von der Auswahl ausgeschlossen werden sollen.

focusNode

Der Knoten am Ende der Auswahl.

focusOffset

Die Anzahl der Kindknoten vom Anfang des Fokus-Knotens, die in die Auswahl einbezogen werden sollen. Wenn der Wert 0 ist, wird der gesamte Knoten ausgeschlossen. Wenn der Wert 1 ist, wird der erste Kindknoten einbezogen. Und so weiter.

Wenn focusNode ein Text-Knoten ist, bezieht sich der Offset auf die Anzahl der Zeichen vom Anfang des Node.textContent, die in die Auswahl einbezogen werden sollen.

Rückgabewert

Keiner (undefined).

Ausnahmen

IndexSizeError DOMException

Wird ausgelöst, wenn anchorOffset größer ist als die Anzahl der Kindknoten innerhalb von anchorNode, oder wenn focusOffset größer ist als die Anzahl der Kindknoten innerhalb von focusNode.

Beispiele

In diesem Beispiel haben wir zwei Absätze, die Spans enthalten, von denen jeder ein einziges Wort enthält. Der erste wird als anchorNode und der zweite als focusNode gesetzt. Zwischen den beiden Knoten befindet sich ein zusätzlicher Absatz.

Außerdem haben wir zwei Formulareingaben, die es Ihnen ermöglichen, anchorOffset und focusOffset festzulegen — beide haben standardmäßig den Wert 0.

Wir haben auch einen Button, der bei Betätigung eine Funktion aufruft, die die setBaseAndExtent()-Methode mit den angegebenen Offsets ausführt und die Auswahl in den Ausgabebereich am Ende des HTML-Dokuments kopiert.

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

Das JavaScript sieht wie folgt aus:

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

Probieren Sie das folgende Live-Beispiel aus, indem Sie verschiedene Offset-Werte setzen, um zu sehen, wie sich dies auf die Auswahl auswirkt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Selection