Auswahl: 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 beispielsweise 0 ist, wird der ganze Knoten einbezogen. Wenn der Wert 1 ist, wird der ganze Knoten minus des ersten Kindknotens einbezogen. 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 beispielsweise 0 ist, wird der ganze 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 als die Anzahl der Kindknoten innerhalb von anchorNode ist oder wenn focusOffset größer als die Anzahl der Kindknoten innerhalb von focusNode ist.

Beispiele

In diesem Beispiel haben wir zwei Absätze mit Spans, die jeweils ein einzelnes Wort enthalten. Der erste wird als anchorNode und der zweite als focusNode gesetzt. Wir haben auch einen zusätzlichen Absatz, der zwischen den beiden Knoten sitzt.

Außerdem haben wir zwei Formulareingaben, die es Ihnen erlauben, den anchorOffset und focusOffset zu setzen — beide haben einen Standardwert von 0.

Wir haben auch eine Schaltfläche, die, wenn sie gedrückt wird, eine Funktion aufruft, die die setBaseAndExtent()-Methode mit den angegebenen Offsets ausführt und die Auswahl in den Ausgabebereich am unteren Rand des HTML 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;
  }
};

Spielen Sie mit dem Live-Beispiel unten, indem Sie verschiedene Offset-Werte einstellen, um zu sehen, wie sich dies auf die Auswahl auswirkt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Selection