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 befindlichen — Node zurück, der beide Grenzpunkte des Range enthält. Das bedeutet, dass, wenn Range.startContainer und Range.endContainer sich auf denselben Knoten beziehen, dieser Knoten der gemeinsame Vorfahren-Container ist.
Da ein Range nicht kontinuierlich sein muss und Knoten auch teilweise auswählen kann, ist dies eine bequeme Möglichkeit, einen Node zu finden, der einen Range umschließt.
Diese Eigenschaft ist schreibgeschützt. Um den Vorfahren-Container eines Node zu ändern, können Sie die verschiedenen verfügbaren Methoden verwenden, 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 Ereignis-Listener, um pointerup-Ereignisse auf einer Liste zu verarbeiten. Der Listener ermittelt die gemeinsamen Vorfahren jedes ausgewählten Textstücks und löst eine Animation aus, um sie 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 verblassende Umrandung zu animieren.
.highlight {
animation: highlight linear 1s;
}
@keyframes highlight {
from {
outline: 1px solid red;
}
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② |