querySelectorAll mit mehreren Bedingungen

Ist es möglich, eine Suche mit querySelectorAll unter Verwendung mehrerer nicht zusammenhängender Bedingungen durchzuführen? Wenn ja wie? Und wie kann man angeben, ob dies UND- oder ODER-Kriterien sind?

Beispielsweise:

Wie alle finden Form s, p s und Legende s mit einem einzigen querySelectorAll Anruf? Möglich?

Ist es möglich, eine Suche unter querySelectorAllVerwendung mehrerer nicht zusammenhängender Bedingungen durchzuführen ?

Ja, da querySelectorAllvollständige CSS-Selektoren akzeptiert werden und CSS das Konzept von Selektorgruppen hat , mit denen Sie mehr als einen nicht verwandten Selektor angeben können. Zum Beispiel:

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

... gibt eine Liste zurück, die ein Element enthält, das ein form oder p oder ist legend .

CSS hat auch das andere Konzept: Einschränkung basierend auf mehr Kriterien. Sie kombinieren einfach mehrere Aspekte eines Selektors. Zum Beispiel:

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

... gibt eine Liste aller divElemente zurück, die auch ( und ) die Klasse haben foo, wobei andere divElemente ignoriert werden.

Sie können sie natürlich kombinieren:

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

... was bedeutet "Schließen Sie jedes divElement ein, das auch die fooKlasse enthält, jedes pElement, das auch die barKlasse enthält, und jedes legendElement, das sich ebenfalls in a befindet div."

Gemäß der Dokumentation können Sie wie bei jedem CSS-Selektor so viele Bedingungen angeben, wie Sie möchten, und diese werden als logisches "ODER" behandelt.

In diesem Beispiel wird eine Liste aller div-Elemente im Dokument mit der Klasse "note" oder "alert" zurückgegeben:

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

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Um die 'UND'-Funktionalität zu erhalten, können Sie zum Beispiel einfach einen Multiattribut-Selektor verwenden, wie jquery sagt:

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

Ex. "input[id][name$='man']" Gibt sowohl die ID als auch den Namen des Elements an und beide Bedingungen müssen erfüllt sein. Für Klassen ist es so offensichtlich wie " .class1.class2", ein Objekt von 2 Klassen zu benötigen.

Alle möglichen Kombinationen von beiden sind gültig, sodass Sie leicht gleichwertigere Ausdrücke für 'ODER' und 'UND' erhalten können.

Ja, querySelectorAllnimmt eine Gruppe von Selektoren :

form, p, legend

Mit reinem JavaScript können Sie dies tun (z. B. SQL) und alles, was Sie brauchen, im Grunde:

<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>