Baseline Widely available
The Range.selectNodeContents()
method sets the Range
to contain the contents of a Node
.
The parent Node
of the start and end of the Range
will be the reference node. The startOffset
is 0, and the endOffset
is the number of child Node
s or number of characters contained in the reference node.
selectNodeContents(referenceNode)
Parameters
Return value
None (undefined
).
const range = document.createRange();
const referenceNode = document.querySelector("div");
range.selectNodeContents(referenceNode);
Live sample
This example lets the user select and deselect a paragraph with buttons. Document.createRange()
, Range.selectNodeContents()
, and Selection.addRange()
are used to select the content. Window.getSelection()
and Selection.removeAllRanges()
are used to deselect it.
<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();
});
Result Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4