> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/javasscript-siblings-ok.md). # JavasScript Siblings (ok)
Fujifilm/gbalb-demo.cybozu.com4913/live.html ```html JavaScript Siblings ``` ## 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 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 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://javascriptuse.gitbook.io/advanced/javasscript-siblings-ok.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.