-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
129 lines (101 loc) · 2.73 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
---
title: "Range: commonAncestorContainer property"
short-title: commonAncestorContainer
slug: Web/API/Range/commonAncestorContainer
page-type: web-api-instance-property
browser-compat: api.Range.commonAncestorContainer
---
{{ApiRef("DOM")}}
The **`Range.commonAncestorContainer`** read-only property
returns the deepest — or furthest down the document tree — {{domxref("Node")}} that
contains both [boundary points](https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Position-h3) of the {{domxref("Range")}}. This means that if
{{domxref("Range.startContainer")}} and {{domxref("Range.endContainer")}} both refer to
the same node, this node is the **common ancestor container**.
Since a `Range` need not be continuous, and may also partially select nodes,
this is a convenient way to find a `Node` which encloses a
`Range`.
This property is read-only. To change the ancestor container of a `Node`,
consider using the various methods available to set the start and end positions of the
`Range`, such as {{domxref("Range.setStart()")}} and
{{domxref("Range.setEnd()")}}.
## Value
A {{domxref("Node")}} object.
## Examples
In this example, we create an event listener to handle {{domxref("Element/pointerup_event", "pointerup")}} events on
a list. The listener gets the common ancestors of each piece of selected text and
triggers an animation to highlight them.
### 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
The `.highlight` class created below uses a set of CSS
{{cssxref("@keyframes")}} to animate a fading outline.
```css
.highlight {
animation: highlight linear 1s;
}
@keyframes highlight {
from {
outline: 1px solid #f00f;
}
to {
outline: 1px solid #f000;
}
}
```
```css hidden
body {
padding: 1px;
}
```
### JavaScript
```js
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);
}
```
### Result
{{EmbedLiveSample("Examples", 700, 190)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [The DOM interfaces index](/en-US/docs/Web/API/Document_Object_Model)