Опубликовано:
Использование нескольких селекторов с помощью методов селектора JavaScript
Один из моих любимых
трюковванильного 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!`);
}
}