Range: commonAncestorContainer プロパティ

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.

Range.commonAncestorContainer は読み取り専用のプロパティで、この Range の両方の境界点を含む、最も深い — または文書ツリー内で最も遠い — ノード (Node) を返します。つまり、Range.startContainerRange.endContainer 両方が同じノードを参照する場合は、このノードは共通の祖先コンテナーです。

Range は連続している必要はなく、ノードを部分的に選択する場合もあり、これは Range を囲っている Node を見つけるときに便利な方法です。

このプロパティは読み取り専用です。 Node の共通の祖先コンテナーを変更するには、 Range の開始位置と終了位置を設定するために利用できるメソッド、例えば Range.setStart()Range.setEnd() を使用することを検討してください。

Node オブジェクトです。

この例では、リスト上の pointerup イベントを取り扱うためイベントリスナーを作ります。このリスナーは選択したテキストの共通の祖先を取得して、それらを強調するアニメーションを起動します。

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

以下で作成した .highlight クラスは、フェードするアウトラインを動かすために一連の @keyframes を使用します。

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

結果

仕様書

Specification
DOM
# ref-for-dom-range-commonancestorcontainer②

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
commonAncestorContainer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報