范围：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 #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);
}

结果

规范

规范
DOM 标准 # ref-for-dom-range-commonancestorcontainer②

浏览器兼容性

BCD 表仅在浏览器中加载

另请参见

DOM 接口索引