Получить родителя элемента 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 можно получить ближайшего родителя, подходящего под заданный CSS селектор:

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

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

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