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

結果

仕様

仕様 ステータス コメント
DOM
Range.commonAncestorContainer の定義		 現行の標準 変更なし
Document Object Model (DOM) Level 2 Traversal and Range Specification
Range.commonAncestorContainer の定義		 廃止された 初期仕様

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
commonAncestorContainerChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報