Range.commonAncestorContainer

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

Range.commonAncestorContainer read-only property returns the deepest — or furthest down the document tree — 节点 that contains both boundary points 的 范围 . This means that if Range.startContainer and Range.endContainer both refer to the same node, this node is the common ancestor container .

Since a 范围 need not be continuous, and may also partially select nodes, this is a convenient way to find a 节点 which encloses a 范围 .

This property is read-only. To change the ancestor container of a 节点 , consider using the various methods available to set the start and end positions of the 范围 ，譬如 Range.setStart() and Range.setEnd() .

句法

rangeAncestor = range.commonAncestorContainer;

范例

In this example, we create an event listener to handle pointerup events on a list. The listener gets the common ancestors of each piece of selected text, and triggers an animation to highlight them.

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 class created below uses a set of CSS @keyframes to animate a fading outline.

.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 The definition of 'Range.commonAncestorContainer' in that specification.	实时标准	无变化。
Document Object Model (DOM) Level 2 Traversal and Range Specification The definition of 'Range.commonAncestorContainer' in that specification.	过时	最初的规范。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`commonAncestorContainer`	Chrome Yes	Edge 12	Firefox 4	IE 9	Opera 9	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

另请参阅

The DOM interfaces index

元数据

最后修改： Aug 22, 2019

DOM (文档对象模型)
范围
构造函数
1. Range()
特性
1. collapsed
2. commonAncestorContainer
3. endContainer
4. endOffset
5. startContainer
6. startOffset
方法
继承：
1. AbstractRange
DOM 相关页面

在此页

句法

范例

HTML

CSS

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题