"querySelectorAll()" con múltiples condiciones en JavaScript
¿ Es posible realizar una búsqueda utilizando querySelectorAll()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 , ps y leyendas con una sola querySelectorAll()llamada? ¿Posible?
¿ Es posible realizar una búsqueda utilizando
querySelectorAllmúltiples condiciones no relacionadas?
Sí, porque querySelectorAllacepta selectores CSS completos y CSS tiene el concepto de grupos de 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 form o p o legend .
CSS también tiene el otro concepto: restringir según más criterios. Simplemente combinas múltiples aspectos de un selector. Por ejemplo:
var list = document.querySelectorAll("div.foo");
... devolverá una lista de todos divlos elementos 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");
...lo 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 div".
Según 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', puedes, por ejemplo, simplemente usar un selector multiatributo, 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 ambas son válidas, por lo que puede obtener fácilmente el equivalente de expresiones 'O' y 'Y' más sofisticadas.
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>