Как работат метод closest в js?

Метод closest принимает на вход CSS селектор и ищет среди своих элементов-предков ближайший элемент удовлетворяющий указаному CSS селектору, стоит обратить внимание, что сам элемент тоже анализируется. Если подходящий элемент будет найден, то метод closest вернёт его, в ином случаем метод вернёт null.

Синтаксис

closest(selectors)

Пример

const container = document.createElement('section');

const div1 = document.createElement('div');
div1.setAttribute('id', 'div-1')
const div2 = document.createElement('div');
div2.setAttribute('id', 'div-2')
const div3 = document.createElement('div');
div3.setAttribute('id', 'div-3')

div2.append(div3);
div1.append(div2);
container.append(div1);
document.body.append(container);

// ближайший предок с id "div-1"
console.log(div3.closest('#div-1')); // <div id="div-1">
// пример случая когда под указанный селектор подошёл элемент на котором метод был вызван
console.log(div3.closest('div'))// <div id="div-3"
// ближайший предок не найден
console.log(div3.closest("#div-4"))// null