Использование нескольких селекторов в методах селекторов JavaScript

Источник: «Using multiple selectors with JavaScript selector methods»
Один из моих любимых трюков ванильного JS заключается в том, что можно передать несколько селекторов в такие методы селектора JavaScript, как Element.querySelector(), Element.querySelectorAll(), Element.closest() и Element.matches().

Поскольку эти методы принимают любой допустимый CSS-селектор, можно использовать список селекторов, разделённый запятыми, для поиска или сопоставления нескольких селекторов.

Например, допустим, необходимо найти все элементы с атрибутами [data-toggle] и [data-content]. Можно передать их в метод Element.querySelectorAll() следующим образом…

// Получение всех подходящих элементов
let elems = document.querySelectorAll('[data-toggle], [data-content]');

Хотите найти первый элемент с идентификатором #sandwich или классом .tuna? Передайте оба в метод Element.querySelector()

// Get the first matching element
let sandwich = document.querySelector('#sandwich, .tuna');

Это удобно при использовании метода Element.matches(). С его помощью можно проверить, есть ли на элементе один из нескольких селекторов, с помощью одной проверки.

// Запускается по событию клика мыши
function eventHandler (event) {
if (event.target.matches('#sandwich, .tuna, .mayo')) {
console.log(`It's a sandwich!`);
}
}

Дополнительные материалы

Предыдущая Статья

Безопасный способ использования переменных .env в Laravel

Следующая Статья

Хуки жизненного цикла в Laravel