“querySelectorAll ()” con múltiples condiciones en JavaScript

Question 1

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

Por ejemplo:

como encontrar todo formas, pagarena leyendas con un solo querySelectorAll() ¿llamar? ¿Posible?

Question 2

¿Es posible hacer una búsqueda por querySelectorAll usando múltiples condiciones no relacionadas?

Sí porque querySelectorAll acepta selectores CSS completos, y CSS tiene el concepto de grupos selectores, 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: Restricción basada en más criterios. Simplemente combina múltiples aspectos de un selector. Por ejemplo:

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

…devolverá una lista de todos div elementos que también (y) tener la clase fooignorando a los demás div elementos.

Por supuesto, puedes combinarlos:

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

…que significa “Incluye cualquier div elemento que también tiene la foo clase, cualquiera p elemento que también tiene la bar clase y cualquier legend elemento 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 ‘O’ lógicos.

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 el id como el nombre del elemento y se deben cumplir ambas condiciones. Para las clases es tan obvio como “.class1.class2” para requerir objeto de 2 clases.

Todas las combinaciones posibles de ambos son válidas, por lo que puede obtener fácilmente expresiones equivalentes a ‘OR’ y ‘AND’ más sofisticadas.

Question 4

Con JavaScript puro puedes hacer esto (como SQL) y cualquier cosa que necesites, 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>

Question 5

Sí, querySelectorAll toma un grupo de selectores:

form, p, legend

Question 6

Usando solo document.querySelectorAll('selector1, selector2, selector3') no funcionó para mí, tuve que usar forEach() junto con el método para lograr el resultado deseado.

document.querySelectorAll('selector1, selector2, selector3').forEach(item => {
        item.//code
    })

document.querySelectorAll('#id1, #id2, #id3').style="background-color: red";
document.querySelectorAll('#id4, #id5, #id6').forEach(item => {
    item.style="background-color: red";
})

<div id="id1">id1</div>
<div id="id2">id2</div>
<div id="id3">id3</div>
<div id="id4">id4</div>
<div id="id5">id5</div>
<div id="id6">id6</div>

Question 7

Con consultaSelectorAll():

AND lógico (&&) se puede archivar especificando elementos y atributos sin comas.
O lógico (||) se puede archivar especificando elementos y atributos con comas.

Por ejemplo, hay 2 formularios como se muestra a continuación:

<form class="form1" method="post">
  <input type="text" id="input1" name="fruits" value="Apple">
  <p id="p1">Orange</p>
</form>
<form class="form2" method="post">
  <input type="text" id="input2" name="fruits" value="Banana">
  <p id="p2">Kiwi</p>
</form>

Luego, puede seleccionar de manzana <input> y de plátano <input> con [name="fruits"] Como se muestra abajo:

document.querySelectorAll('[name="fruits"]');
// Apple's <input> and Banana's <input>

Ahora, al especificar elementos y atributos sin comas, puede seleccionar solo de manzana <input> Como se muestra abajo:

                        // ↓ ↓ ↓ ↓ ↓  ↓ ↓ ↓               ↓ ↓ ↓ ↓ ↓ ↓ ↓     
document.querySelectorAll('form.form1 input[name="fruits"][id="input1"]');
// Apple's <input>

Además, puede reemplazar .form1 con [class="form1"] y [id="input1"] con #input1 Como se muestra abajo:

                        //         .form1                       [id="input1"]
                        //     ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓                     ↓ ↓ ↓ ↓
document.querySelectorAll('form[class="form1"] input[name="fruits"]#input1');
// Apple's <input>

A continuación, puede seleccionar de manzana <input> con #input1 Como se muestra abajo:

document.querySelectorAll('#input1');
// Apple's <input>

Ahora, al especificar elementos y atributos con comas, puede seleccionar de manzana <input>, de naranja <p>, de plátano <input> y de kiwi <p> Como se muestra abajo:

                        //          ↓ ↓ ↓ ↓  ↓     
document.querySelectorAll('#input1, #input2, p');
                        //        ↑        ↑
// Apple's <input>, Orange's <p>, Banana's <input> and Kiwi's <p>

y

Además, por supuesto, puedes usar ambos Y lógico y O lógico juntos como se muestra a continuación:

document.querySelectorAll('entrada#entrada1, entrada#entrada2, p#p1')[
// Apple's <input>, Orange's <p> and Banana's <input>

y

¿Ha sido útil esta solución?