Range: commonAncestorContainer 屬性
Range.commonAncestorContainer 只讀屬性返回包含 Range 的兩個邊界點的、文件樹中最深（或最下游）的 Node。這意味著，如果 Range.startContainer 和 Range.endContainer 都指向同一個節點，那麼這個節點就是公共祖先容器。
由於 Range 不必是連續的，並且可能只部分選擇節點，因此這是一種查詢包含 Range 的 Node 的便捷方法。
此屬性是隻讀的。要更改 Node 的祖先容器，請考慮使用可用於設定 Range 起始位置和結束位置的各種方法，例如 Range.setStart() 和 Range.setEnd()。
值
一個 Node 物件。
示例
在此示例中，我們建立了一個事件監聽器來處理列表中 pointerup 事件。該監聽器獲取每個選定文字片段的公共祖先，並觸發動畫以突出顯示它們。
HTML
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 來為漸變輪廓製作動畫。
css
.highlight {
animation: highlight linear 1s;
}
@keyframes highlight {
from {
outline: 1px solid red;
}
to {
outline: 1px solid transparent;
}
}
JavaScript
js
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 # ref-for-dom-range-commonancestorcontainer② |
瀏覽器相容性
載入中…