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