JavaScript | Как получить родителя?

Есть простая разметка:

<div class="gg">
   <p>GGGG</p>
</div>
<div class="aa">
   <p>AAAA</p>
</div>

Простая разметка - два div два p - HTML — Простая разметка — два div два p — HTML

Мы хотим получить родителя для элемента <p>AAAA</p>. Как его узнать?

Для начала получим сам элемент <p>AAAA</p>

document.getElementsByTagName("p")[1]

Элемент получен:

Получили второй элемент p - JavaScript — Получили второй элемент p — JavaScript

Теперь ищем родителя. В этом нам поможет «Объектная модель документа» (DOM). В стандарте DOM есть «Интерфейс Node«. В этом интерфейсе есть атрибут, который называется «parentNode» — он возвращает узел родителя. Воспользуемся им:

document.getElementsByTagName("p")[1].parentNode

Применение атрибута parentNode - JavaScript — Применение атрибута parentNode — JavaScript

Мы получили родителя

Альтернатива

В «Интерфейсе Node» есть атрибут, который называется «parentElement» — он возвращает элемент родителя. Воспользуемся им:

document.getElementsByTagName("p")[1].parentElement

Применение атрибута parentElement - JavaScript — Применение атрибута parentElement — JavaScript

В нашей задаче результат одинаков.

Информационные ссылки

DOM

DOM | Интерфейс Node

Официальная страница стандарта DOM — https://dom.spec.whatwg.org/