How to Find the Parents, Siblings, and Children of an Element Using the JavaScript DOM

Recently, I was working on a project that required me to add a class to all the siblings of an element if one of the siblings had that class. Similarly, I was required to show a popup if an ancestor of the current element had a specific class. Traversing up, down, or sideways in a DOM becomes important in a lot of situations when you are doing web development.

In this tutorial, I will show you to find the parents, children, or siblings of an element using pure JavaScript, without needing any helper library.

The following HTML will be our reference for this tutorial:

<ol>
  <li class="first-item"><p class="first-para"><span>Elephants</span> are the <span class="hlt">largest</span> existing land animals.</p></li>
  <li><p><span>Elephant</span> skin is <span class="important">2.5cm thick</span> on the back and <span>parts</span> of the <span>head</span>.</p></li>
  <li class="last-item"><p>About <span>60%</span> of an <span>Elephant's</span> weight is borne by its <span>front legs</span>.</p></li>
</ol>

It contains three list items, each of which wraps around a paragraph. Every paragraph contains multiple span elements. The first list item contains a span tag that has the hlt class applied to it. We will be using this quite often in our tutorial.

Find the Parent of an Element

If you're looking for the immediate ancestor or parent of an element, you can simply check the value of the parentNode or parentElement property. Once you have the parent node or element, you can do further inspections with the help of properties like classList or textContent, as shown below.

let hlt_span = document.querySelector(".hlt");

// Output: <p class="first-para"><span>Elephants</span> are the <span class="hlt">largest</span> existing land animals.</p>
console.log(hlt_span.parentElement);

// Output: DOMTokenList [ "first-para" ]
console.log(hlt_span.parentElement.classList);

// Output: Elephants are the largest existing land animals.
console.log(hlt_span.parentElement.textContent);

Find the Ancestors of the Current Element

You can use the closest() method if you want to traverse the current element as well as all its ancestors up to the document root to find a particular element that matches the selector you specified as an argument to this method.

The closest() method will return null if there are no ancestors that match the passed selector. You will also get SyntaxError if you don't want a valid CSS selector as an argument.

Here is an example:

let hlt_span = document.querySelector(".hlt");

// Output: <li class="first-item">
console.log(hlt_span.closest("li.first-item"));

// Output: null
console.log(hlt_span.closest("li.last-item"));

You can see in the above example that even though our markup contains a list element with the last-item class, it is not an ancestor of our span tag with the hlt class. Therefore, a call to closest() from our span element returns null.

On the other hand, a call to closest() with li.first-item as a selector does give us the first list item back.

Find the Children of the Current Element

Just like the parentNode or parentElement property, there are similar properties called childNodes and children that you can use to get information about different child elements. The primary difference between these two is that childNodes will give back elements, text, and comment nodes. On the other hand, children will only give back element nodes, while skipping text or comment nodes.

let first_item = document.querySelector("li.first-item p");

// Output: NodeList(4) [ span, #text, span.hlt, #text ]
console.log(first_item.childNodes);

// Output: HTMLCollection { 0: span, 1: span.hlt, length: 2 }
console.log(first_item.children);

Let's say you are looking for a child span element with the hlt class inside the first list item. You could iterate over all the child elements and then use the classList property and its contains() method to see if any of them have the specified class.

let first_item = document.querySelector("li.first-item p");

// Output: <span class="hlt">largest</span>
for(child of first_item.children) {
  if(child.classList.contains("hlt")){
    console.log(child);
  }
}

Find a Descendant of the Current Element

You are probably already familiar with the querySelector() and querySelectorAll() methods that can be called on the Document object. These methods allow you to find any element within the document that matches the specified selector.

The same methods are also defined for the Element object and allow you to find any element which is a descendant of the calling element and matches the specified selector.

let list = document.querySelector("ol");
let list_spans = list.querySelectorAll("span");

// Output: 9
console.log(list_spans.length);

// Output: <span class="important">2.5cm thick</span>
for(span of list_spans) {
  if(span.classList.contains("important")){
    console.log(span);
  }
}

There were nine span tags in our original markup that were descendants of the ordered list. You can see from the code above that all of them were present in list_spans by checking that the value returned by the length property is indeed 9.

We iterate over all of these span tags to find one which has the important class applied to it.

You can also use querySelector() and querySelectorAll() to find the direct descendants or children of the calling element by passing :scope > selector as the selector value for these methods. Here is an example:

let first_item = document.querySelector("p");

let direct_spans = first_item.querySelectorAll(":scope > span");

// Output: <span class="hlt">largest</span>
for(span of direct_spans) {
  if(span.classList.contains("hlt")){
    console.log(span);
  }
}

Find the Next and Previous Siblings

Finding the next and previous siblings of an element is easy once you have a reference to its node. The next sibling can be found by using the nextSibling property, and the previous sibling can be found by using the previousSibling property. You should note that both of these properties will also return any existing text nodes or comment nodes.

If you are only interested in finding the next or previous element nodes, you should consider using the nextElementSibling and previousElementSibling properties. Here are some examples:

let important = document.querySelector(".important");

// Output: #text " skin is "
console.log(important.previousSibling);

// Output: #text " on the back and "
console.log(important.nextSibling);

// Output: <span>Elephant</span>
console.log(important.previousElementSibling);

// Output: <span>parts</span>
console.log(important.nextElementSibling);

Find All Siblings of an Element

A node instance also has a few other useful properties, such as the parentElement property, which returns the parent element of the current DOM node. Once you have the parent element, you can use its children property to get a live HTMLCollection of all its child elements.

Once you have all the child elements, it's just a matter of iterating over them to exclude the element whose siblings we want to find and storing all others in an array, as shown below.

let important = document.querySelector(".important");
let all_children = important.parentElement.children;
let siblings = [];

// HTMLCollection { 0: span, 1: span.important, 2: span, 3: span, length: 4 }
console.log(all_children);

for(child of all_children) {
  if(child != important) {
    siblings.push(child);
  }
}

// [<span>Elephant</span>, <span>parts</span>, <span>head</span>]
console.log(siblings);

Find All the Previous Siblings of an Element

In this and the next section, we will learn how to get all the previous or next siblings of an element in JavaScript. I will use an ordered list for these examples, with the names of some random people. Here is our markup:

1	<ol class="people">
2	<li>Adam</li>
3	<li>Charles</li>
4	<li>John</li>
5	<li>Amanda</li>
6	<li>Emma</li>
7	<li>Emily</li>
8	<li class="lawyer">Saul Goodman</li>
9	<li>Hank</li>
10	<li>Walter</li>
11	<li>Skyler</li>
12	<li>Jesse</li>
13	</ol>

Our goal here is to go through the list of people and find all the previous siblings of our list element with the class lawyer.

The trick here is to get a reference to the lawyer element and then keep using previousElementSibling to get the previous sibling until there is none left. This property will return null when we reach the first element in the list.

let lawyer = document.querySelector(".lawyer");

let prev_siblings = [];

let prev_elem = lawyer.previousElementSibling;

while(prev_elem) {
  prev_siblings.push(prev_elem); 
  prev_elem = prev_elem.previousElementSibling;
}

// Array(6) [ li, li, li, li, li, li ]
console.log(prev_siblings);

/*
Emily
Emma
Amanda
John
Charles
Adam
*/
for(sibling of prev_siblings) {
  console.log(sibling.textContent);
}

Find All the Next Siblings of an Element

We can proceed in a similar manner to find all the next siblings of an element. The only change we need to make is to use the nextElementSibling property instead of the previousElementSibling property. Here is an example:

let lawyer = document.querySelector(".lawyer");

let next_siblings = [];

let next_elem = lawyer.nextElementSibling;

while(next_elem) {
  next_siblings.push(next_elem);
  
  next_elem = next_elem.nextElementSibling;
}

// Array(4) [ li, li, li, li ]
console.log(next_siblings);

/*
Hank
Walter
Skyler
Jesse
*/
for(sibling of next_siblings) {
  console.log(sibling.textContent);
}

Final Thoughts

Traversing the DOM to find the parents, ancestors, children, descendants, or siblings of an element is now quite easy with JavaScript. You can simply use the parentElement, children, nextElementSibling, and previousElementSibling properties to find the parent, children, next sibling, or previous sibling of any element. You can also use the closest() method if you are looking for a particular ancestor, or you can use the querySelector() method if you are looking for a particular descendant.