具有多个条件的 querySelectorAll答案

【问题标题】：querySelectorAll with multiple conditions具有多个条件的 querySelectorAll
【发布时间】：2016-03-04 06:49:45
【问题描述】：

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

例如：

如何通过单个 querySelectorAll 调用找到所有 form、p 和 legend？可能吗？

【问题讨论】：

我不确定您所说的“AND 或 OR 标准”是什么意思。你能举个例子吗？
The documentation covers this in the first example.

标签： javascript

【解决方案1】：

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

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

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

...将返回包含form 或 p 或 legend的任何元素的列表。

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

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

...将返回也（和）具有foo 类的所有div 元素的列表，忽略其他div 元素。

当然，您可以将它们组合起来：

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

...这意味着“包括任何同时具有foo 类的div 元素、任何也具有bar 类的p 元素，以及同样位于@987654339 内的任何legend 元素@。”

【讨论】：

是否有可能使用 document.querySelectorAll 中的单个类，例如我有 var hotts = document.querySelectorAll(".clickMapItem.text , .clickMapItem.multiImageText");变量我;对于 (i = 0; i
@MileMijatovic：问题应该作为问题而不是 cmets 发布。但请参阅：stackoverflow.com/questions/25238153/…
好的，但总的来说，可以按照我的要求做吗？该链接没有帮助
选择器组的概念在 2018 年仍然对我有用...感谢分享
年复一年，我仍然使用document.querySelectorAll("div.foo", "div.bar")，但它从未奏效。 Code UX 是下一个 UX ;)

【解决方案2】：

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

此示例返回文档中所有 div 元素的列表带有“note”或“alert”类：

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

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

同时，要获得“与”功能，您可以例如简单地使用多属性选择器，如 jquery 所说：

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

例如。 "input[id][name$='man']" 指定元素的 id 和名称，并且必须满足这两个条件。对于类来说，“.class1.class2”显然需要 2 个类的对象。

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

【讨论】：

虽然方法本身是正确的，但没有必要参考jQuery来解释CSS（特别是因为OP的问题仅限于JavaScript）。

【解决方案3】：

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

【讨论】：

这并没有真正回答问题，特别是 how to specify whether those are AND or OR criteria 部分，请参阅接受的答案

【解决方案4】：

是的，querySelectorAll 确实需要 group of selectors：

form, p, legend

【讨论】：