QuerySelectorAll с несколькими условиями

Можно ли выполнить поиск по запросуSelectorAll, используя несколько несвязанных условий? Если да, то как? И как указать, являются ли эти критерии И или ИЛИ?

Например:

Как найти все форму s, p и легенда с одним вызовом querySelectorAll? Возможно ли это?

Ответы

Ответ 1

Можно ли выполнить поиск по querySelectorAll с использованием нескольких несвязанных условий?

Да, потому что querySelectorAll принимает полные селектор CSS, а CSS имеет концепцию групп селекторов, которая позволяет указать более одного несвязанного селектора. Например:

var list = document.querySelectorAll("form, p, legend");

... вернет список, содержащий любой элемент, который является form или p или legend.

У CSS также есть другая концепция: ограничение на основе большего количества критериев. Вы просто объединяете несколько аспектов селектора. Например:

var list = document.querySelectorAll("div.foo");

... вернет список всех элементов div, которые также (и) имеют класс foo, игнорируя другие элементы div.

Вы можете, конечно, объединить их:

var list = document.querySelectorAll("div.foo, p.bar, div legend");

..., что означает "Включить любой элемент div, который также имеет класс foo, любой элемент p, который также имеет класс bar и любой элемент legend, который также находится внутри div > ".

Ответ 2

В соответствии с документацией, как и с любым селектором css, вы можете указать столько условий, сколько хотите, и они рассматриваются как логические "OR".

В этом примере возвращается список всех элементов div внутри документа с классом "заметки" или "предупреждения":

var matches = document.querySelectorAll("div.note, div.alert");

источник: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Между тем, чтобы получить функциональность "И", вы можете, например, просто использовать селектор multiattribute, поскольку jquery говорит:

https://api.jquery.com/multiple-attribute-selector/

ех. "input[id][name$='man']" указывает как id, так и имя элемента, и оба условия должны быть выполнены. Для классов это так же очевидно, как ".class1.class2", чтобы требовать объект из 2 классов.

Все возможные комбинации обоих действительны, поэтому вы можете легко получить эквивалент более сложных выражений "OR" и "AND".