JavaScript | Как найти предка с классом?

У нас есть такая разметка:

<div class="vasya">
   <div class="kolya">
      <div class="masha">
         <p>Это Маша</p>
      </div>
   </div>
</div>
<div class="vasya">
   <div class="kolya">
      <div class="zina">
         <p>Это Зина</p>
      </div>
   </div>
</div>

По структуре мы видим блоки <div> с одинаковыми классами — vasya kolya. Это похоже на повторение. Меняется только содержимое параграфа <p>.

Разметка с Зиной и Машей - HTML — Разметка с Зиной и Машей — HTML

Что мы хотим сделать?

Теперь давайте представим, что нам нужно получить предка второго параграфа. И класс у этого предка должен быть — kolya

Как это сделать? На помощь нам придёт стандарт объектной модели документа в котором есть метод closest(). Метод closest() описан в интерфейсе Element.

Как работает метод closest()?

Для веб-разработчиков (не нормативно)

element . closest(selectors)

Возвращает первого (начиная с элемента element) инклюзивного предка, который соответствует селекторам selectors, в противном случае — null.

element . matches(selectors)

Возвращает true, если сопоставление селекторов selectors с корнем элемента element дает element, и false в противном случае.

То есть мы должны вызвать метод closest() на втором элементе параграфа (Это Зина) и передать в качестве параметра строку-селектор «.kolya»

Шаг 1 — Получаем параграф с Зиной

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

Получили параграф с Зиной - JavaScript — Получили параграф с Зиной — JavaScript

Шаг 2 — Вызываем метод closest() на Зине

[...document.getElementsByTagName("p")][1].closest(".kolya")

Получили предка с нужным классом для параграфа - JavaScript — Получили предка с нужным классом для параграфа — JavaScript

Самое важное то, что мы получили предка (Колю) именно для нашего потомка (Зины). Это не первый Коля (не Машин Коля, а Зинин).

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

Стандарт DOM — Раздел «The closest(selectors) method» — https://dom.spec.whatwg.org/#dom-element-closest