querySelectorAll con múltiples condiciones

105

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

javascript Alan Coromano
fuente
No estoy seguro de lo que quiere decir con " criterios Y u O ". ¿Puede dar un ejemplo de eso?
Bergi
4
La documentación cubre esto en el primer ejemplo .
Andy

Respuestas:

176

¿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".

TJ Crowder
fuente
¿Existe la posibilidad de usar una sola clase de document.querySelectorAll? Por ejemplo, tengo var hotspots = document.querySelectorAll (". clickMapItem.text, .clickMapItem.multiImageText"); var i; para (i = 0; i <hotspots.length; i ++) {hotspots [i] .style.display = "ninguno"; } Necesito usar la instrucción if else, cómo verificar si es una clase que muestra nada o algo más. si (hotspots [0 o 1] .style.display == "none") no funciona.
Mile Mijatović
1
@MileMijatovic: Las preguntas deben publicarse como preguntas en lugar de comentarios. Pero vea: stackoverflow.com/questions/25238153/…
TJ Crowder
Ok, pero en general, ¿es posible hacer lo que pedí? El enlace no ayudó
Mile Mijatović
El concepto de grupos selectores me funcionó todavía en 2018 ... gracias por compartir
Eric Hepperle - CodeSlayer2010
17

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.

mikus
fuente
2
Si bien el método en sí es correcto, no es necesario hacer referencia a jQuery para explicar CSS (especialmente porque la pregunta del OP se limita a JavaScript).
Chaya Cooper
0

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

Alejandro DV
fuente
1
esto realmente no responde la pregunta, específicamente la how to specify whether those are AND or OR criteriaparte, vea la respuesta aceptada
Meidan Alon