```
## JavasScript Siblings
**Summary**: in this tutorial, you will learn how to select the next siblings, previous siblings, and all siblings of an element. Let’s say you have the following list of items:
```xml
Home
Products
Customer Support
Careers
Investors
News
About Us
Code language: HTML, XML (xml)
```
### Get the next siblings
To get the next sibling of an element, you use the `nextElementSibling` attribute:
```javascript
let nextSibling = currentNode.nextElementSibling;Code language: JavaScript (javascript)
```
The `nextElementSibling` returns `null` if the specified element is the first one in the list. The following example uses the `nextElementSibling` property to get the next sibling of the list item that has the `current` class:
```javascript
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;
console.log(nextSibling);Code language: JavaScript (javascript)
```
Output:
```xml
Careers
Code language: HTML, XML (xml)
```
In this example:
* First, select the list item whose class is `current` using the [`querySelector()`](https://www.javascripttutorial.net/javascript-dom/javascript-siblings/).
* Second, get the next sibling of that list item using the `nextElementSibling` property.
To get all the next siblings of an element, you can use the following code:
```javascript
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;
while(nextSibling) {
console.log(nextSibling);
nextSibling = nextSibling.nextElementSibling;
}Code language: JavaScript (javascript)
```
### Get the previous siblings
To get the previous siblings of an element, you use the `previousElementSibling` attribute:
```javascript
let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;Code language: JavaScript (javascript)
```
The `previousElementSibling` property returns `null` if the current element is the first one in the list.
The following example uses the `previousElementSibling` property to get the previous siblings of the list item that has the `current` class:
```javascript
let current = document.querySelector('.current');
let prevSiblings = current.previousElementSibling;
console.log(prevSiblings);
Code language: JavaScript (javascript)
```
And the following example selects all the previous siblings of the list item that has the `current` class:
```javascript
let current = document.querySelector('.current');
let prevSibling = current.previousElementSibling;
while(prevSibling) {
console.log(prevSibling);
prevSibling = current.previousElementSibling;
}
Code language: JavaScript (javascript)
```
### Get all siblings of an element
To get all siblings of an element, we’ll use the logic:
* First, select the parent of the element whose siblings that you want to find.
* Second, select the first child element of that parent element.
* Third, add the first element to an array of siblings.
* Fourth, select the next sibling of the first element.
* Finally, repeat the 3rd and 4th steps until there are no siblings left. In case the sibling is the original element, skip the 3rd step.
The following function illustrates the steps:
```javascript
let getSiblings = function (e) {
// for collecting siblings
let siblings = [];
// if no parent, return no sibling
if(!e.parentNode) {
return siblings;
}
// first child of the parent node
let sibling = e.parentNode.firstChild;
// collecting siblings
while (sibling) {
if (sibling.nodeType === 1 && sibling !== e) {
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
return siblings;
};
Code language: JavaScript (javascript)
```
Put it all together:
```xml
JavaScript Siblings
Home
Products
Customer Support
Careers
Investors
News
About Us
Code language: HTML, XML (xml)
```
Output:
```json
["Home", "Products", "Careers", "Investors", "News", "About Us"]
Code language: JSON / JSON with Comments (json)
```
### Summary
* The `nextElementSibling` returns the next sibling of an element or `null` if the element is the last one in the list.
* The `previousElementSibling` returns the previous sibling of an element or `null` if the element is the first one in the list.
* To get all siblings of an element, you can use a helper function that utilizes the `nextElementSibling` property.
