Range: selectNodeContents()-Methode

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

js
selectNodeContents(referenceNode)

Parameter

referenceNode

Der Node, dessen Inhalte innerhalb eines Range ausgewählt werden.

Rückgabewert

Keiner (undefined).

Beispiele

js
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

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

js
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

Siehe auch