querySelectorAll con più condizioni

Question 1

È possibile effettuare una ricerca per querySelectorAll utilizzando più condizioni non correlate? Se si come? E come specificare se si tratta di criteri AND o OR?

Per esempio:

Come trovare tutte le forme , p e legende con una singola chiamata querySelectorAll ? Possibile?

Question 2

È possibile effettuare una ricerca querySelectorAllutilizzando più condizioni non correlate?

Sì, perché querySelectorAllaccetta selettori CSS completi e CSS ha il concetto di gruppi di selettori , che ti consente di specificare più di un selettore non correlato. Per esempio:

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

... restituirà un elenco contenente qualsiasi elemento che sia un form or p o legend .

I CSS hanno anche un altro concetto: limitare in base a più criteri. Devi solo combinare più aspetti di un selettore. Per esempio:

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

... restituirà un elenco di tutti gli divelementi che hanno anche ( e ) la classe foo, ignorando gli altri divelementi.

Puoi, ovviamente, combinarli:

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

... che significa "Includi qualsiasi divelemento che abbia anche la fooclasse, qualsiasi pelemento che abbia anche la barclasse e qualsiasi legendelemento che sia anche dentro a div."

Question 3

Secondo la documentazione, proprio come con qualsiasi selettore CSS, puoi specificare tutte le condizioni che desideri e vengono trattate come "OR" logico.

Questo esempio restituisce un elenco di tutti gli elementi div all'interno del documento con una classe di "note" o "alert":

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

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

Nel frattempo per ottenere la funzionalità 'AND' puoi ad esempio utilizzare semplicemente un selettore multiattributo, come dice jquery:

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

ex. "input[id][name$='man']" specifica sia l'ID che il nome dell'elemento ed entrambe le condizioni devono essere soddisfatte. Per le classi è ovvio come " .class1.class2" richiedere un oggetto di 2 classi.

Tutte le possibili combinazioni di entrambi sono valide, quindi puoi facilmente ottenere l'equivalente di espressioni "OR" e "AND" più sofisticate.

Question 4

Sì, querySelectorAllaccetta un gruppo di selettori :

form, p, legend

Question 5

Con JavaScript puro puoi fare questo (come SQL) e tutto ciò di cui hai bisogno, in pratica:

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

Espandi lo snippet