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

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/

Поделись записью