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

3 года назад

Andrey Moshkov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Метод 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

3 года назад

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

Похожие вопросы