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

構文

rangeAncestor = range.commonAncestorContainer;

使用例

この例ではリスト上の {{Event("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 {{cssxref("@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);
}

結果

{{EmbedLiveSample("Example", 700, 190)}}

仕様

仕様 ステータス コメント
{{SpecName('DOM WHATWG', '#dom-range-commonancestorcontainer', 'Range.commonAncestorContainer')}} {{Spec2('DOM WHATWG')}} 変更なし
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-commonParent', 'Range.commonAncestorContainer')}} {{Spec2('DOM2 Traversal_Range')}} 初期仕様

ブラウザの互換性

{{Compat("api.Range.commonAncestorContainer")}}

関連情報