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

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Das DOM-Schnittstellenverzeichnis