querySelectorAll具有多个条件

问题描述 投票:50回答:4

是否可以使用多个不相关的条件通过querySelectorAll进行搜索?如果有,怎么样?以及如何指定这些是AND还是OR标准?

例如:

如何使用单个querySelectorAll调用查找所有表单,ps和图例?可能?

javascript
4个回答
97
投票

有可能使用querySelectorAll使用多个不相关的条件进行搜索吗?

是的,因为querySelectorAll接受完整的CSS选择器,而CSS具有selector groups的概念,它允许您指定多个不相关的选择器。例如:

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

...将返回一个包含任何元素的列表,该元素是formplegend

CSS还有另一个概念:基于更多标准的限制。您只需组合选择器的多个方面。例如:

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

...将返回所有div元素的列表,这些元素也(和)具有类foo,忽略其他div元素。

当然,你可以将它们结合起来:

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

...这意味着“包括任何div元素,也有foo类,任何p元素也有bar类,和任何legend元素也在div。”


8
投票

根据文档,就像使用任何css选择器一样,您可以根据需要指定任意数量的条件,并将它们视为逻辑“OR”。

此示例返回文档中所有div元素的列表,其中包含“note”或“alert”类:

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

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

同时为了获得“AND”功能,您可以使用多属性选择器,例如jquery说:

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

恩。 "input[id][name$='man']"指定元素的id和名称,并且必须满足两个条件。对于类来说,它需要2个类的对象,就像“.class1.class2”一样明显。

两者的所有可能组合都是有效的,因此您可以轻松获得更复杂的“OR”和“AND”表达式。


1
投票

是的,querySelectorAll确实采取了group of selectors

form, p, legend

-2
投票

使用纯JavaScript,您可以执行此操作(例如SQL)以及您需要的任何内容,基本上:

<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>
© www.soinside.com 2019 - 2024. All rights reserved.