Диапазон: свойство commonAncestorContainer

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

Свойство Range.commonAncestorContainer read-only возвращает самый глубокий — или находящийся дальше по дереву документа — Node, содержащий оба граничные точки Range. Это означает, что если Range.startContainer и Range.endContainer ссылаются на один и тот же узел, этот узел является общим предком контейнера.

Поскольку Range не обязательно должен быть непрерывным и может также частично выбирать узлы, это удобный способ найти Node, который включает в себя Range.

Это свойство является read-only. Чтобы изменить контейнер предка Node, используйте различные методы для установки начальных и конечных позиций Range, такие как Range.setStart() и Range.setEnd().

Значение

Объект Node.

Примеры

В этом примере мы создаём обработчик событий, который обрабатывает 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);
}

Результат

Спецификации

Спецификация
DOM # ref-for-dom-range-commonancestorcontainer②

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`commonAncestorContainer`	1	12	1	9	1	18	4	10.1	1	1.0	4.4

См. также

Индекс интерфейсов DOM

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Range/commonAncestorContainer