---
description: https://www.javascripttutorial.net/javascript-dom/javascript-siblings/
---

# JavasScript Siblings (ok)

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FILX8XEeZlMhUPRqmsgDG%2Fimage.png?alt=media&#x26;token=69b99ccc-e5ad-4226-9ee0-57b471ae796d" alt=""><figcaption></figcaption></figure>

Fujifilm/gbalb-demo.cybozu.com4913/live.html

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript Siblings</title>
</head>
<body>
  <ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li class="current">Customer Support</li>
    <li>Careers</li>
    <li>Investors</li>
    <li>News</li>
    <li>About Us</li>
  </ul>
  <script>
  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;
  };
  let siblings = getSiblings(document.querySelector('.current'));
  siblingText = siblings.map(e => e.innerHTML);
  console.log(siblingText);
  </script>
</body>
</html>
```

## 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
<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li class="current">Customer Support</li>
    <li>Careers</li>
    <li>Investors</li>
    <li>News</li>
    <li>About Us</li>
</ul>
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
<li>Careers</li>
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Siblings</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Products</li>
        <li class="current">Customer Support</li>
        <li>Careers</li>
        <li>Investors</li>
        <li>News</li>
        <li>About Us</li>
    </ul>
    
    <script>
        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;
        };

        let siblings = getSiblings(document.querySelector('.current'));
        siblingText = siblings.map(e => e.innerHTML);
        console.log(siblingText);
    </script>
</body>
</html>
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.
