具有多个条件的querySelectorAll

Question 1

是否可以使用多个不相关的条件通过querySelectorAll进行搜索？如果是，怎么办？以及如何指定这些条件是AND或OR标准？

例如：

如何通过单个querySelectorAll调用查找所有形式s，p和图例？可能？

Question 2

是否可以通过querySelectorAll使用多个不相关的条件进行搜索？

是的，因为querySelectorAll可以接受完整的CSS选择器，并且CSS具有选择器组的概念，因此您可以指定多个不相关的选择器。例如：

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

...将返回一个包含任何元素的列表，这些元素是form or p 或or legend。

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

Question 3

根据文档，就像使用任何css选择器一样，您可以指定任意多个条件，它们被视为逻辑“或”。

此示例返回一个文档中所有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和名称，并且必须满足两个条件。对于类.class1.class2，需要2个类的对象与“ ”一样明显。

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

Question 4

是的，querySelectorAll是否需要一组选择器：

form, p, legend

Question 5

使用纯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>

展开摘要