querySelectorAll con múltiples condiciones

Question 1

¿Es posible realizar una búsqueda por querySelectorAll usando múltiples condiciones no relacionadas? Si es así, ¿cómo? ¿Y cómo especificar si esos son criterios Y u O?

Por ejemplo:

¿Cómo encontrar todos los formularios s, p sy leyendas con una sola llamada querySelectorAll ? ¿Posible?

Question 2

¿Es posible realizar una búsqueda querySelectorAllutilizando múltiples condiciones no relacionadas?

Sí, porque querySelectorAllacepta selectores CSS completos y CSS tiene el concepto de grupos de selectores , lo que le permite especificar más de un selector no relacionado. Por ejemplo:

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

... devolverá una lista que contiene cualquier elemento que sea un form o p o legend .

CSS también tiene el otro concepto: restringir en función de más criterios. Simplemente combina varios aspectos de un selector. Por ejemplo:

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

... devolverá una lista de todos los divelementos que también ( y ) tienen la clase foo, ignorando otros divelementos.

Por supuesto, puedes combinarlos:

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

... que significa "Incluir cualquier divelemento que también tenga la fooclase, cualquier pelemento que también tenga la barclase y cualquier legendelemento que también esté dentro de un div".

Question 3

De acuerdo con la documentación, al igual que con cualquier selector css, puede especificar tantas condiciones como desee, y se tratan como un 'O' lógico.

Este ejemplo devuelve una lista de todos los elementos div dentro del documento con una clase de "nota" o "alerta":

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

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

Mientras tanto, para obtener la funcionalidad 'Y', puede, por ejemplo, simplemente usar un selector de atributos múltiples, como dice jquery:

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

ex. "input[id][name$='man']" especifica tanto la identificación como el nombre del elemento y se deben cumplir ambas condiciones. Para las clases es tan obvio como " .class1.class2" requerir un objeto de 2 clases.

Todas las combinaciones posibles de ambos son válidas, por lo que puede obtener fácilmente el equivalente de expresiones 'OR' y 'AND' más sofisticadas.

Question 4

Sí, querySelectorAlltoma un grupo de selectores :

form, p, legend

Question 5

Con JavaScript puro puede hacer esto (como SQL) y cualquier cosa que necesite, básicamente:

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

Expandir fragmento