Get parents until element matches selector

JavaScript, Browser · Jan 6, 2021

Finds all the ancestors of an element up until the element matched by the specified selector.

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.
Use Element.matches() to check if the current element matches the specified selector.

const getParentsUntil = (el, selector) => {
  let parents = [],
    _el = el.parentNode;
  while (_el && typeof _el.matches === 'function') {
    parents.unshift(_el);
    if (_el.matches(selector)) return parents;
    else _el = _el.parentNode;
  }
  return [];
};

getParentsUntil(document.querySelector('#home-link'), 'header');
// [header, nav, ul, li]

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.