Range.selectNodeContents()
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.
Syntax
range.selectNodeContents(referenceNode);
Parameters
Example
range = document.createRange();
referenceNode = document.getElementsByTagName("div")[0];
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.
HTML
<p id="p"><b>Use the buttons below</b> 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
Specification |
---|
DOM Standard # dom-range-selectnodecontents |
Browser compatibility
BCD tables only load in the browser