Range: Eigenschaft commonAncestorContainer

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Die schreibgeschützte Eigenschaft Range.commonAncestorContainer gibt den tiefsten — oder am weitesten unten im Dokumentbaum gelegenen — Node zurück, der beide Grenzpunkte des Range enthält. Das bedeutet, wenn sowohl Range.startContainer als auch Range.endContainer auf denselben Knoten verweisen, ist dieser Knoten der gemeinsame Vorfahren-Container.

Da ein Range nicht kontinuierlich sein muss und auch Knoten teilweise auswählen kann, ist dies eine bequeme Möglichkeit, einen Node zu finden, der ein Range umschließt.

Diese Eigenschaft ist schreibgeschützt. Um den Vorfahren-Container eines Node zu ändern, sollten Sie die verschiedenen verfügbaren Methoden verwenden, um die Start- und Endpositionen des Range festzulegen, wie zum Beispiel Range.setStart() und Range.setEnd().

Wert

Ein Node Objekt.

Beispiele

In diesem Beispiel erstellen wir einen Ereignis-Listener, um pointerup-Ereignisse auf einer Liste zu behandeln. Der Listener ermittelt die gemeinsamen Vorfahren jedes Textstücks, das ausgewählt wurde, und startet eine Animation, um diese hervorzuheben.

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

Die unten erstellte Klasse .highlight nutzt eine Reihe von CSS @keyframes, um eine ausblendende Umrandung zu animieren.

css
.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid #f00f;
  }
  to {
    outline: 1px solid #f000;
  }
}

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);
}

Ergebnis

Spezifikationen

Specification
DOM
# ref-for-dom-range-commonancestorcontainer②

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
commonAncestorContainer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch