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 Eigenschaft ist schreibgeschützt und gibt den tiefsten — oder am weitesten unten im Dokumentbaum liegenden — Node zurück, der beide Grenzpunkte des Range enthält. Das bedeutet, wenn sowohl Range.startContainer als auch Range.endContainer auf denselben Knoten verweisen, dann ist dieser Knoten der gemeinsame Vorfahren-Container.

Da ein Range nicht kontinuierlich sein muss und möglicherweise Knoten nur teilweise auswählt, ist dies eine praktische Möglichkeit, einen Node zu finden, der ein Range umschließt.

Diese Eigenschaft ist schreibgeschützt. Um den Vorfahren-Container eines Node zu ändern, ziehen Sie in Betracht, die verschiedenen Methoden zu verwenden, die verfügbar sind, 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 Klasse .highlight verwendet ein Set 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);
}