Selection: setBaseAndExtent() Methode

Die setBaseAndExtent() Methode der Selection Schnittstelle legt den Bereich der Auswahl fest, der alle oder Teile von zwei angegebenen DOM-Knoten sowie alle dazwischenliegenden Inhalte umfasst.

Die Ancora- und Fokus-Knoten können sich in einem Shadow-Tree befinden, wenn vom Browser unterstützt.

Syntax

setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)

Parameter

anchorNode

Der Knoten am Anfang der Auswahl.

anchorOffset

Die Anzahl der Kindknoten vom Beginn des Ancora-Knotens, die von der Auswahl ausgeschlossen werden sollen. Wenn der Wert beispielsweise 0 ist, wird der gesamte Knoten einbezogen. Wenn der Wert 1 ist, wird der gesamte Knoten bis auf den ersten Kindknoten 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 Beginn des Fokus-Knotens, die in die Auswahl einbezogen werden sollen. Wenn der Wert beispielsweise 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 mit Spans, von denen jeder ein einzelnes Wort enthält. Der erste wird als anchorNode festgelegt und der zweite als focusNode. Wir haben auch einen zusätzlichen Absatz, der zwischen den beiden Knoten liegt.

Als Nächstes haben wir zwei Formulareingaben, die Ihnen erlauben, anchorOffset und focusOffset festzulegen — beide haben standardmäßig den Wert 0.

Wir haben auch eine Schaltfläche, die beim Drücken eine Funktion aufruft, die die setBaseAndExtent() Methode mit den angegebenen Offsets ausführt und die Auswahl in den Ausgabepunkt am unteren Ende 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>

Der JavaScript-Code 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 Live-Beispiel unten aus, indem Sie unterschiedliche Offset-Werte festlegen, um zu sehen, wie sich dies auf die Auswahl auswirkt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Selection