Range: commonAncestorContainer property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

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

Value

A Node object.

Examples

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

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.

css
.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid #f00f;
  }
  to {
    outline: 1px solid #f000;
  }
}

JavaScript

js
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
# ref-for-dom-range-commonancestorcontainer②

Browser compatibility

See also