This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The Selection.containsNode()
method indicates whether a specfied node is part of the selection.
Syntax
sel.containsNode(node, partialContainment)
Parameters
node
- The node that is being looked for in the selection.
partialContainment
Optional- When
true
,containsNode()
returnstrue
when a part of the node is part of the selection. Whenfalse
,containsNode()
only returnstrue
when the entire node is part of the selection. If not specified, the default valuefalse
is used.
Example
Check for selection
This snippet checks whether anything inside the body element is selected.
console.log(window.getSelection().containsNode(document.body, true));
Find the hidden word
In this example, a message appears when you select the secret word. It uses addEventListener()
to check for selectionchange
events.
HTML
<p>Can you find the secret word?</p> <p>Hmm, where <span id="secret" style="color:transparent">SECRET</span> could it be?</p> <p id="win" hidden>You found it!</p>
JavaScript
const secret = document.getElementById('secret'); const win = document.getElementById('win'); // Listen for selection changes document.addEventListener('selectionchange', () => { const selection = window.getSelection(); const found = selection.containsNode(secret); win.toggleAttribute('hidden', !found); });
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selection API The definition of 'Selection.containsNode()' in that specification. |
Working Draft | Current |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
containsNode | Chrome Full support Yes | Edge Full support 12 | Firefox
Full support
4
| IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android
Full support
4
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
partialContainment parameter is optional | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support 55 | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 55 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
See also
Selection
, the interface it belongs to.