Range.commonAncestorContainer

Range.commonAncestorContainer は読み込み専用のプロパティで、Rangeの中の 境界点 で最も深いもしくはドキュメントツリーから最も遠い両方を含む Node を返します。つまり、Range.startContainer と Range.endContainer 両方が同じノードを参照する場合は、このノードは共通の祖先コンテナです。
Range は連続している必要はなく、ノードを部分的に選択する場合もあり、これは Range を囲っている Node を見つけるときに便利な方法です。
これは読み取り専用プロパティです。 Node の共通祖先コンテナを変更するため、Range の開始位置と終了位置をセットするため Range.setStart() と Range.setEnd() のような利用可能な様々なメソッドを利用することを検討します。

構文

rangeAncestor = range.commonAncestorContainer;

使用例

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

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 クラスはフェードするアウトラインを動かすためのCSS @keyframes のセットを使用します。

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

結果

仕様

ブラウザの互換性

BCD tables only load in the browser

関連情報