Получить родителя элемента JS

В данном уроке мы рассмотрим способы получения родителей элемента на JavaScript.

Для начала сделаем следующий HTML код с родительскими и дочерним элементом:

html<div id="grand">
  <div id="parent">
    <div id="child">text</div>
  </div>
</div>

Получим ссылку на наш дочерний элемент с помощью метода querySelector:

javascriptlet elem = document.querySelector('#child');

Давайте теперь, имея ссылку на дочерний элемент, получим его родительский элемент. Рассмотрим различные способы.

Свойство parentElement

Непосредственного родителя элемента можно получить с помощью свойства parentElement:

javascriptlet parent = elem.parentElement;
console.log(parent);

Свойство closest

С помощью метода closest можно получить ближайшего родителя, подходящего под заданный CSS селектор:

javascriptlet parent = elem.closest('div');
console.log(parent);

Свойство parents

С помощью свойства parents можно получить все родительские элементы текущего элемента, начиная с самого верхнего уровня:

javascriptlet parents = elem.closest('div');
console.log(parents);