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 ⁨2015年7月⁩.

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

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

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

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

body {
 padding: 1px;
}

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