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

Question 1

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

Например:

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

Question 2

Можно ли выполнить поиск, 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.»

Question 3

Согласно документации, как и с любым селектором CSS, вы можете указать столько условий, сколько захотите, и они будут обрабатываться как логическое «ИЛИ».

В этом примере возвращается список всех элементов div в документе с классом «note» или «alert»:

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

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

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

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

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

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

Question 4

Да, querySelectorAllесть группа селекторов :

form, p, legend

Question 5

С чистым JavaScript вы можете сделать это (например, SQL) и все, что вам нужно, в основном:

<html>

<body>

<input type='button' value='F3' class="c2" id="btn_1">
<input type='button' value='F3' class="c3" id="btn_2">
<input type='button' value='F1' class="c2" id="btn_3">

<input type='submit' value='F2' class="c1" id="btn_4">
<input type='submit' value='F1' class="c3" id="btn_5">
<input type='submit' value='F2' class="c1" id="btn_6">

<br/>
<br/>

<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() 
    {
        var arrFiltered = document.querySelectorAll('input[value=F2][type=submit][class=c1]');

            arrFiltered.forEach(function (el)
            {                
                var node = document.createElement("p");
                
                node.innerHTML = el.getAttribute('id');

                window.document.body.appendChild(node);
            });
        }
    </script>

</body>

</html>

Развернуть фрагмент