Выбор элементов без определённого класса в JavaScript

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

Чтобы отобрать HTML-элементы, не содержащие определённого класса, используйте CSS-псевдокласс :not(). Допустим, нам нужно найти <div>, который не принадлежит классу .exclude:

div:not(.exclude) {
    /* Эти div не содержат класс .exclude, но мы всё ещё учитываем их */
}

Метод прямо применяется в CSS и не требует дополнительной поддержки через JavaScript или jQuery. Вместе с тем, если вам нужно взаимодействовать с этими элементами или применить более динамический выбор, ниже представлен более подробный ответ.

Расширенный выбор с применением JavaScript

Мощный метод querySelector

document.querySelector в JavaScript предоставляет доступ ко всем возможностям CSS-селекторов, включая удобный :not(). Например, чтобы найти первый <div>, не принадлежащий классу .exclude:

let rebelDiv = document.querySelector('div:not(.exclude)');
/* Вот он, первый из выбранных. Как его использовать — решать вам. */

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

Массовый выбор через querySelectorAll

Применяя document.querySelectorAll, можно отобрать все <div>, которые не имеют класса .exclude, одним действием:

let rebelDivs = document.querySelectorAll('div:not(.exclude)');
/* У вас в руках все выбранные элементы. Используйте их по своему усмотрению. */

Манипулирование выбранными элементами

Получив набор элементов через querySelectorAll, можно воздействовать на каждый из них индивидуально:

rebelDivs.forEach(function(rebelDiv) {
    rebelDiv.style.backgroundColor = 'yellow'; // Это может на время изменить их визуальное представление.
});
/* Интересный факт, выделение элементов яркими цветами — старинная традиция отладки */

Псевдокласс :not() для исключения нескольких классов

Сила :not() в том, что его можно комбинировать для исключения не одного, а множества классов:

let trulyRebelDivs = document.querySelectorAll('div:not(.exclude):not(.ignore)');
/* Теперь у нас есть div, которые не только исключены, но и проигнорированы */

Динамическое применение "Не поймал – не для тебя"

Примеры из практики бесценны — представленная ссылка на jsfiddle позволяет наблюдать все вышеуказанные операции в действии, будто это внимательно спланированное демонстрационное представление:

• Exclude Class jsfiddle

Мастерство использования :not() в сложных ситуациях

Исследование взаимодействий DOM с элементами без определённых классов — это искусство, в котором селектор :not() играет ключевую роль, предоставляя широкие возможности контроля над вашими элементами.

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

Как пример, давайте представим себя флористами. У нас есть букет:

Букет цветов: [🌸, 🌺, 🌼, 🌻, 🌷]

Однако, кое-какие из этих цветов имеют пурпурные лепестки или класс .purple:

Букет пурпурных цветов: [🌸, 🌷]

Нам нужно отобрать те цветы, у которых нет класса .purple:

Избранное флориста: [🌺, 🌼, 🌻]

В HTML это будет эквивалентно использованию селектора :not() для выбора элементов без заданного класса:

.flower:not(.purple) {
  /* Вот они, ваши выбранные цветы без пурпурных лепестков */
}

Таким образом, флорист отбирает идеальные цветы, не думая о пурпурных лепестках.

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

1. CSS :not() селектор – W3Schools — доступное руководство по CSS :not селектору.
2. :not() – CSS: Cascading Style Sheets | MDN — детальный обзор псевдокласса :not() от Mozilla.
3. :not() селектор | Документация API jQuery — обзор селектора :not() на примерах jQuery.
4. Селекторы | CSS-Tricks — универсальный взгляд на мир CSS-селекторов.
5. CSS Diner – Где мы вкушаем CSS селекторы! — игровое обучение CSS селекторам.
6. Специфика в специфичности CSS | CSS-Tricks — подробности о специфичности CSS, важной части работы с селекторами.
7. Псевдоклассы – CSS: Cascading Style Sheets | MDN — всё о CSS псевдоклассах, включая и :not(), с глубоким анализом.