Range.commonAncestorContainer
The Range.commonAncestorContainer
read-only property
returns the deepest — or furthest down the document tree — Node
that
contains both boundary
points of the Range
. This means that if
Range.startContainer
and Range.endContainer
both refer to
the same node, this node is the common ancestor container.
Since a Range
need not be continuous, and may also partially select nodes,
this is a convenient way to find a Node
which encloses a
Range
.
This property is read-only. To change the ancestor container of a Node
,
consider using the various methods available to set the start and end positions of the
Range
, such as Range.setStart()
and
Range.setEnd()
.
Syntax
rangeAncestor = range.commonAncestorContainer;
Example
In this example, we create an event listener to handle pointerup
events on
a list. The listener gets the common ancestors of each piece of selected text, and
triggers an animation to highlight them.
HTML
<ul>
<li>Strings
<ul>
<li>Cello</li>
<li>Violin
<ul>
<li>First Chair</li>
<li>Second Chair</li>
</ul>
</li>
</ul>
</li>
<li>Woodwinds
<ul>
<li>Clarinet</li>
<li>Oboe</li>
</ul>
</li>
</ul>
CSS
The .highlight
class created below uses a set of CSS
@keyframes
to animate a fading outline.
.highlight {
animation: highlight linear 1s;
}
@keyframes highlight {
from { outline: 1px solid #f00f; }
to { outline: 1px solid #f000; }
}
JavaScript
document.addEventListener('pointerup', e => {
const selection = window.getSelection();
if (selection.type === 'Range') {
for (let i = 0; i < selection.rangeCount; i++) {
const range = selection.getRangeAt(i);
playAnimation(range.commonAncestorContainer);
}
}
});
function playAnimation(el) {
if (el.nodeType === Node.TEXT_NODE) {
el = el.parentNode;
}
el.classList.remove('highlight');
setTimeout(() => {
el.classList.add('highlight');
}, 0);
}
Result
Specifications
Specification |
---|
DOM Standard # ref-for-dom-range-commonancestorcontainer② |
Browser compatibility
BCD tables only load in the browser