JS метод Element.closest()

Загальний опис

Метод closest() є корисним інструментом у JavaScript, який дозволяє знаходити найближчий батьківський елемент заданого елемента в DOM-дереві. Цей метод особливо корисний, коли потрібно звернутися до контейнера або елемента, який має конкретні властивості або класи, і ці властивості або класи можуть бути декількох рівнів вглиб DOM-дерева.

Щоб використовувати метод closest(), вам потрібно мати посилання на елемент DOM, до якого хочете застосувати цей метод. Потім ви можете викликати цей метод на цьому елементі та передати йому селектор або назву тега батьківського елемента, який ви шукаєте.

// Приклад використання методу closest()
const element = document.querySelector('.child-element');
const closestContainer = element.closest('.parent-container');

У цьому прикладі ми використовуємо метод closest() для знаходження найближчого елемента з класом .parent-container, який є батьківським для елемента з класом .child-element.

Одна з основних переваг методу closest() полягає в тому, що він автоматично обходить всі батьківські елементи до тих пір, поки не знайде той, який відповідає заданому селектору або тегу. Це дозволяє легко і швидко отримувати доступ до потрібного контейнера чи елемента в DOM-структурі.

Крім того, метод closest() допомагає покращити читабельність вашого коду, оскільки ви можете здійснювати доступ до батьківських елементів без необхідності вручну проходити через весь DOM.

Наприклад, ви можете використовувати цей метод для знаходження форми, в якій знаходиться конкретний елемент введення:

// Приклад використання методу closest() для знаходження форми
const inputElement = document.querySelector('input[type="text"]');
const formElement = inputElement.closest('form');

У цьому прикладі ми знаходимо найближчий елемент <form>, який є батьківським для елемента <input type="text">. Це дозволяє нам отримати доступ до форми, до якої відноситься конкретне поле вводу.

Узагальнюючи, метод closest() є потужним і корисним інструментом у JavaScript, який спрощує доступ до батьківських елементів в DOM-структурі. Його використання допомагає зробити ваш код більш читабельним та підтримуваним, особливо при роботі зі складними DOM-структурами.

Порада:	Використання методу `closest()` дозволяє знаходити найближчий батьківський елемент до поточного елементу, який відповідає заданому CSS селектору. Для початківця важливо розуміти, що цей метод допомагає здійснювати навігацію в DOM-структурі, що може бути корисним при роботі з подіями або розміщенням елементів на сторінці.
Порада:	Під час використання `closest()` варто пам'ятати, що метод шукає батьківські елементи по DOM-дереву, починаючи з поточного елементу і переходячи вгору. Якщо потрібно знайти елементи в іншому напрямку (наприклад, вниз по DOM), варто розглянути інші методи навігації, такі як `querySelector()`.
Порада:	Для досвідчених програмістів `closest()` може бути корисним для швидкого доступу до батьківських елементів, щоб здійснювати різноманітні маніпуляції з їх властивостями або стилями. Наприклад, якщо потрібно змінити стиль чи додати клас до контейнера, метод `closest()` може швидко знайти його.

Синтаксис

closest(selectors)

Параметри

*selectors: Рядок дійсного CSS селектора для відповідності Елементу та його предків.

Return

element: Повертає найближчий предок елемента або сам елемент, який відповідає заданим селекторам. Якщо такий елемент відсутній, повертається значення null.

Переглядачі

Переглядач
	41	35	6	28	15

Переглядач
	41	41	35	9

Переглядач
	-	-

Приклади

У цьому прикладі ми маємо два елементи <div> з класом item всередині контейнера <div> з класом container. При кліку на будь-який з цих елементів, JavaScript використовує метод closest() для пошуку найближчого батьківського елемента з класом container. Знайдений елемент виводиться в <div> з класом output.

Користувач може взаємодіяти з прикладом, клікаючи на елементи з класом item. Це продемонструє використання методу closest() для пошуку найближчого батьківського елемента, що відповідає заданому селектору.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/jORqoGq">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використали метод closest() для знаходження найближчого батьківського елементу з ідентифікатором "parent" для елементу з ідентифікатором "child". Цей метод дозволяє легко отримувати доступ до батьківських елементів на основі їх селекторів.

// HTML розмітка
// <div id="parent">
//   <div id="child">
//     <span>Example</span>
//   </div>
// </div>

// JavaScript код
const childElement = document.querySelector("`#child`");
const parentElement = childElement.closest("`#parent`");

console.log(parentElement); // Виведе: <div id="parent">...</div>

У цьому складнішому прикладі ми використали метод closest() для знаходження найближчого контейнера з класом "container", коли користувач клікає на будь-який елемент з класом "item". Після знаходження батьківського контейнера ми додаємо або видаляємо клас "highlight" для підсвітки контейнера, щоб наголосити його. Цей приклад демонструє, як метод closest() може бути використаний для більш складних взаємодій з подіями та маніпуляціями DOM.

// HTML розмітка
// <div class="container">
//   <div class="item">
//     <span>Item 1</span>
//   </div>
//   <div class="item">
//     <span>Item 2</span>
//   </div>
//   <div class="item">
//     <span>Item 3</span>
//   </div>
// </div>

// JavaScript код
document.addEventListener("click", function(event) {
  if (event.target.classList.contains("`item`")) {
    const parentItem = event.target.closest("`div.container`");
    parentItem.classList.toggle("`highlight`");
  }
});

JS довідник

JavaScript

Наповнення JS розділу