-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
79 lines (58 loc) · 2.43 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
---
title: "Node: previousSibling property"
short-title: previousSibling
slug: Web/API/Node/previousSibling
page-type: web-api-instance-property
browser-compat: api.Node.previousSibling
---
{{APIRef("DOM")}}
The read-only **`previousSibling`** property of the {{domxref("Node")}} interface
returns the node immediately preceding the specified one in its parent's
{{domxref("Node.childNodes", "childNodes")}} list,
or `null` if the specified node is the first in that list.
> **Note:** Browsers insert text nodes into a document to represent whitespace in the source markup.
> Therefore a node obtained, for example, using [`Node.firstChild`](/en-US/docs/Web/API/Node/firstChild)
> or `Node.previousSibling`
> may refer to a whitespace text node rather than the actual element the author intended to get.
>
> See [Whitespace in the DOM](/en-US/docs/Web/API/Document_Object_Model/Whitespace) for more information.
>
> You can use [`previousElementSibling`](/en-US/docs/Web/API/Element/previousElementSibling)
> to get the previous element node (skipping text nodes and any other non-element nodes).
>
> To navigate the opposite way through the child nodes list use [Node.nextSibling](/en-US/docs/Web/API/Node/nextSibling).
## Value
A {{domxref("Node")}} representing the previous sibling of the current node,
or `null` if there are none.
## Examples
The following examples demonstrate how `previousSibling` works with and without text nodes mixed in with elements.
### First example
In this example, we have a series of `img` elements directly adjacent to each other, with no whitespace between them.
```html
<img id="b0" /><img id="b1" /><img id="b2" />
```
```js
document.getElementById("b1").previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.id; // "b1"
```
### Second example
In this example, there are whitespace text nodes (line breaks) between the `img` elements.
```html
<img id="b0" />
<img id="b1" />
<img id="b2" />
```
```js
document.getElementById("b1").previousSibling; // #text
document.getElementById("b1").previousSibling.previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.previousSibling; // <img id="b1">
document.getElementById("b2").previousSibling; // #text
document.getElementById("b2").previousSibling.id; // undefined
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("Node.nextSibling")}}
- {{domxref("Element.previousElementSibling")}}