查询选择器具有多个条件的所有

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

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

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

...将返回一个列表，其中包含任何元素，即 或 或 。formplegend

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

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

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

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

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

...这意味着“包括任何也具有类的元素，也具有该类的任何元素，以及也位于 .divfoopbarlegenddiv

根据文档，就像任何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/

前任。 指定元素的 id 和名称，并且必须同时满足这两个条件。对于类，像“”一样明显，需要2个类的对象。"input[id][name$='man']".class1.class2

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