snippetjavascriptTip

How can I get all ancestors, parents, siblings, and children of an element?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

parentsjavascriptandhowchildrenelementallgetancestorscan

Problem

DOM traversal is a very useful skill to have if you're working with JavaScript and the browser. It allows you to navigate the DOM tree and find elements that are related to a given element. Let's explore how to use it to our advantage.
> [!NOTE]
>
> All the examples in this article make use of the Node interface, which is the base class for all nodes in the DOM, including elements, text nodes, and comments. Additionally, the functions return arrays of elements, not NodeList objects, to make them easier to work with.
Oddly enough, there are two ways to get an element's children: Node.childNodes and Node.children. The difference between the two is that Node.childNodes returns all child nodes, including text nodes, while Node.children returns only element nodes.

Solution

const getChildren = (el, includeTextNodes = false) =>
  includeTextNodes ? [...el.childNodes] : [...el.children];

getChildren(document.querySelector('ul'));
// [li, li, li]

getChildren(document.querySelector('ul'), true);
// [li, #text, li, #text, li, #text]

>
> All the examples in this article make use of the Node interface, which is the base class for all nodes in the DOM, including elements, text nodes, and comments. Additionally, the functions return arrays of elements, not NodeList objects, to make them easier to work with.
Oddly enough, there are two ways to get an element's children: Node.childNodes and Node.children. The difference between the two is that Node.childNodes returns all child nodes, including text nodes, while Node.children returns only element nodes.
Depending on our needs, we can use either of these properties to get an element's children, so let's use an argument to decide which one to return.
To get an element's siblings, we can use the Node.parentNode property to access the parent node and then use Node.childNodes to get all the children of the parent.
We can then convert the NodeList to an array using the spread operator (...). Finally, we can filter out the element itself from the list of children to get the siblings using Array.prototype.filter().

Code Snippets

const getChildren = (el, includeTextNodes = false) =>
  includeTextNodes ? [...el.childNodes] : [...el.children];

getChildren(document.querySelector('ul'));
// [li, li, li]

getChildren(document.querySelector('ul'), true);
// [li, #text, li, #text, li, #text]

const getSiblings = el =>
  [...el.parentNode.childNodes].filter(node => node !== el);

getSiblings(document.querySelector('head'));
// ['body']

const getAncestors = el => {
  let ancestors = [];

  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }

  return ancestors;
};

getAncestors(document.querySelector('nav'));
// [document, html, body, header, nav]

Context

From 30-seconds-of-code: get-ancestors-parents-siblings-children

Revisions (0)

No revisions yet.