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.startContainer と Range.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 Standard
# ref-for-dom-range-commonancestorcontainer②

ブラウザーの互換性

BCD tables only load in the browser

関連情報