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().


rangeAncestor = range.commonAncestorContainer;


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.


          <li>First Chair</li>
          <li>Second Chair</li>


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; }


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);

function playAnimation(el) {
  if (el.nodeType === Node.TEXT_NODE) {
    el = el.parentNode;

  setTimeout(() => {
  }, 0);



Specification Status Comment
The definition of 'Range.commonAncestorContainer' in that specification.
Living Standard No change.
Document Object Model (DOM) Level 2 Traversal and Range Specification
The definition of 'Range.commonAncestorContainer' in that specification.
Obsolete Initial specification.

Browser compatibility

BCD tables only load in the browser

See also