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-структурі, що може бути корисним при роботі з подіями або розміщенням елементів на сторінці.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

closest(selectors)

Параметри

selectors

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

автор: Bond

правити

Повернення

element

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div id="parent">
    <div id="child"><span>Приклад</span></div>
</div>

const childElement = document.querySelector('#child');
const parentElement = childElement.closest('#parent');

console.log(parentElement.id); // 'parent'

// 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`");
  }
});