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 July 2015.
Die schreibgeschützte Eigenschaft Range.commonAncestorContainer 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, ist dieser Knoten der gemeinsame Vorfahren-Container.
Da ein Range nicht kontinuierlich sein muss und auch Knoten teilweise selektieren kann, 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, sollten Sie die verschiedenen verfügbaren Methoden in Betracht ziehen, um die Start- und Endpositionen des Range festzulegen, wie z.B. Range.setStart() und Range.setEnd().
Wert
Ein Node-Objekt.
Beispiele
In diesem Beispiel erstellen wir einen Event-Listener, der pointerup-Ereignisse auf einer Liste behandelt. Der Listener ermittelt die gemeinsamen Vorfahren jedes ausgewählten Textstücks und löst eine Animation aus, um diese hervorzuheben.
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 .highlight-Klasse verwendet eine Reihe von CSS-@keyframes, um eine ausblendende Umriss-Animation zu erzeugen.
.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);
}
Ergebnis
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-range-commonancestorcontainer② |