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② |
浏览器兼容性
加载中…