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

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

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

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

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

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

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

Свойство parentElement

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

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

Свойство closest

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

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

Свойство parents

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

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