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

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