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

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

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