Range: selectNodeContents()-Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
Die Range.selectNodeContents()-Methode setzt den Range, um die Inhalte eines Node zu enthalten.
Der übergeordnete Node des Beginns und Endes des Range wird der Referenzknoten sein. Der startOffset ist 0, und der endOffset ist die Anzahl der Kind-Nodes oder die Anzahl der Zeichen, die im Referenzknoten enthalten sind.
Syntax
selectNodeContents(referenceNode)
Parameter
referenceNode-
Der
Node, dessen Inhalte innerhalb einesRangeausgewählt werden.
Rückgabewert
Keiner (undefined).
Beispiele
const range = document.createRange();
const referenceNode = document.querySelector("div");
range.selectNodeContents(referenceNode);
Live-Beispiel
Dieses Beispiel ermöglicht es dem Benutzer, einen Absatz mit Buttons auszuwählen und abzuwählen. Document.createRange(), Range.selectNodeContents() und Selection.addRange() werden verwendet, um den Inhalt auszuwählen. Window.getSelection() und Selection.removeAllRanges() werden verwendet, um ihn abzuwählen.
HTML
<p id="p">
<strong>Use the buttons below</strong> to select or deselect the contents of
this paragraph.
</p>
<button id="select-button">Select paragraph</button>
<button id="deselect-button">Deselect paragraph</button>
JavaScript
const p = document.getElementById("p");
const selectButton = document.getElementById("select-button");
const deselectButton = document.getElementById("deselect-button");
selectButton.addEventListener("click", (e) => {
// Clear any current selection
const selection = window.getSelection();
selection.removeAllRanges();
// Select paragraph
const range = document.createRange();
range.selectNodeContents(p);
selection.addRange(range);
});
deselectButton.addEventListener("click", (e) => {
const selection = window.getSelection();
selection.removeAllRanges();
});
Ergebnis
Spezifikationen
| Specification |
|---|
| DOM Standard # dom-range-selectnodecontents |
Browser-Kompatibilität
BCD tables only load in the browser