Skip to content

Get element ancestors

Returns all the ancestors of an element from the document root to the given element.

Use Node.parentNode and a while loop to move up the ancestor tree of the element.
Use Array.prototype.unshift() to add each new ancestor to the start of the array.

const getAncestors = el => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

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

More like this

Collection · 14 snippets
JavaScript DOM Querying

Learn how to query the DOM quickly and efficiently with this collection of JavaScript tips and tricks.
JavaScript · January 6, 2021
Get parents until element matches selector

Finds all the ancestors of an element up until the element matched by the specified selector.
JavaScript · December 18, 2022
Element at a specific point on the page

Using Document.elementFromPoint() to easily get the element at a specific point on the page.
JavaScript · January 5, 2021
Vertical offset of element

Finds the distance from a given element to the top of the document.