Range: commonAncestorContainer-Eigenschaft

Baseline Widely available

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

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

Da ein Range nicht zusammenhängend sein muss und auch teilweise Knoten 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, erwägen Sie die Verwendung der verschiedenen verfügbaren Methoden, um die Start- und Endpositionen des Range festzulegen, wie zum Beispiel Range.setStart() und Range.setEnd().

<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 .highlight-Klasse verwendet eine Reihe von CSS @keyframes, um eine verblassende Umrandung zu animieren.

css

.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid red;
  }
  to {
    outline: 1px solid transparent;
  }
}

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