Выбор элемента с несколькими классами в JavaScript без jQuery

Быстрый ответ

Если вам нужно эффективно и быстро найти все элементы, которые обладают определенными классами, воспользуйтесь методом querySelectorAll:

let multiClassElements = document.querySelectorAll('.class1.class2');
// Так вы получите все элементы, принадлежащие сразу к классам .class1 и .class2!

Этот метод дает вам NodeList, содержащий элементы с указанными классами, с которым можно работать напрямую, или превратить его в массив с помощью функции Array.from().

Продвинутые методы выборки

При необходимости выполнения выборки по сложным критериям применяются продвинутые CSS-селекторы.

Поиск элементов с различными комбинациями классов

Если вам нужно выбрать элементы, обладающие различными комбинациями классов, можно воспользоваться методом querySelectorAll('.class1.class2, .class3'). Данный селектор позволит найти элементы, содержащие любую из указанных комбинаций классов.

Подробнее об этом расскажет наш спикер на видео

Исключение нежелательных классов

Если нужно исключить из выборки элементы, обладающие определенным классом, используйте селектор :not:

let elementsWithoutThirdClass = document.querySelectorAll('.class1.class2:not(.class3)');
// Нам не нужен класс .class3.

Этот селектор позволит отсеять элементы со всеми указанными классами .class1.class2, но не содержащие класс .class3.

Выбор непосредственных потомков, без вложенных элементов

В связях между элементами есть свои нюансы. Чтобы выбрать непосредственные дочерние элементы, используйте селектор >, а для выбора всех потомков достаточено пробела:

let firstBorn = document.querySelectorAll('.parent > .child'); // Родительские предпочтения в CSS.
let anyHeir = document.querySelectorAll('.grandparent .descendant'); // Все потомки, даже наиболее отдаленные, подлежат выбору.

Набор инструментов для работы

Кроме querySelectorAll, у вас есть и другие инструменты, каждый из которых имеет свои особенности.

Старые способы и обратная совместимость

Вы можете встретить getElementsByClassName в старом коде, который работает несколько иначе с комбинациями классов.

От jQuery до Vanilla JS

Если вы привыкли к удобству $('.class1.class2') в jQuery, то стоит знать, что метод querySelectorAll может делать то же самое, но не требует подключения дополнительных библиотек.

Визуализация

Процесс выбора элементов с использованием нескольких классов можно представить как рыбалку с использованием сети с особым узором:

Представьте веб-страницу как океан 🌊. Вам необходимо поймать рыбу 🐟 с определенными характеристиками.

Каждый класс действует как узор, присутствующий на вашей сети:

let capturedFish = document.querySelectorAll('.yellow.blue');
// Только рыба с узором .yellow и .blue – это именно то, что вы искали!

Таким образом, вы всегда сможете найти именно то, что вам нужно. 🎣

Профессиональные хитрости и скрытые возможности

Использование querySelector для поиска одного элемента

Если вам требуется только один элемент, вы можете воспользоваться querySelector — он найдет первый подходящий элемент по заданным критериям:

let loneWolf = document.querySelector('.class1.class2');
// Он предпочитает уединение.

Преобразование в массив

Набор элементов NodeList можно преобразовывать в массив для решения более сложных задач:

let badassArray = Array.from(document.querySelectorAll('.class1.class2'));
// Они подготовлены к бою!

Динамические веб-страницы

Веб-страницы могут постоянно меняться. Чтобы ваш выбор всегда оставался актуальным, используйте MutationObserver — это ваш личный аналитик изменений на странице.

Полезные материалы

1. Документация метода querySelectorAll() — MDN — подробное руководство по использованию метода querySelectorAll.
2. Справочник по CSS-селекторам — w3schools — незаменимая шпаргалка для разработчиков по CSS-селекторам.
3. Управление несколькими CSS классами — CSS-Tricks — рекомендации о том, как эффективно работать с несколькими классами в одном селекторе.
4. Работа с несколькими селекторами в jQuery — изучите групповой подход jQuery к выбору элементов с несколькими классами.
5. Поиск элементов в DOM — учебное руководство, которое помогает разобраться с методами поиска в DOM.
6. Шпаргалка по CSS-селекторам — SitePoint — краткий обзор CSS-селекторов для более глубокого понимания работы с классами.
7. W3C CSS Селекторы: методы querySelector() и querySelectorAll() — подробное изложение возможностей CSS-селекторов и их использования в querySelector и querySelectorAll.