Javascript 具有多个条件的 querySelectorAll
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34001917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
querySelectorAll with multiple conditions
提问by Alan Coromano
Is it possible to make a search by querySelectorAll using multiple unrelated conditions? If yes how? And how to specify whether those are AND or OR criteria?
是否可以使用多个不相关的条件通过 querySelectorAll 进行搜索？如果是如何？以及如何指定这些是 AND 还是 OR 标准？
For example:
例如：
How to find all forms, ps and legends with a single querySelectorAllcall? Possible?
如何找到所有形式的S，pS和传奇s的单querySelectorAll电话吗？可能的？
回答by T.J. Crowder
Is it possible to make a search by
querySelectorAllusing multiple unrelated conditions?
是否可以
querySelectorAll使用多个不相关的条件进行搜索？
Yes, because querySelectorAllaccepts full CSS selectors, and CSS has the concept of selector groups, which lets you specify more than one unrelated selector. For instance:
是的，因为querySelectorAll接受完整的 CSS 选择器，并且 CSS 有选择器组的概念，它允许您指定多个不相关的选择器。例如：
var list = document.querySelectorAll("form, p, legend");
...will return a list containing any element that is a formorporlegend.
...将返回一个列表，其中包含 aform或por 的任何元素legend。
CSS also has the other concept: Restricting based on more criteria. You just combine multiple aspects of a selector. For instance:
CSS 还有另一个概念：基于更多标准进行限制。您只需组合选择器的多个方面。例如：
var list = document.querySelectorAll("div.foo");
...will return a list of all divelements that also(and) have the class foo, ignoring other divelements.
...将返回所有的列表div元素也（和）有类foo，忽略了其他div的元素。
You can, of course, combine them:
当然，您可以将它们组合起来：
var list = document.querySelectorAll("div.foo, p.bar, div legend");
...which means "Include any divelement that also has the fooclass, any pelement that also has the barclass, and any legendelement that's also inside a div."
...这意味着“包括任何div也有foo类的p元素，任何也有bar类的legend元素，以及任何也在div. 中的元素。”
回答by mikus
According to the documentation, just like with any css selector, you can specify as many conditions as you want, and they are treated as logical 'OR'.
根据文档，就像任何 css 选择器一样，您可以根据需要指定任意数量的条件，并将它们视为逻辑“或”。
This example returns a list of all div elements within the document with a class of either "note" or "alert":
此示例返回文档中所有 div 元素的列表，类别为“note”或“alert”：
var matches = document.querySelectorAll("div.note, div.alert");
source: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
来源：https: //developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Meanwhile to get the 'AND' functionality you can for example simply use a multiattribute selector, as jquery says:
同时，为了获得“AND”功能，您可以简单地使用多属性选择器，如 jquery 所说：
https://api.jquery.com/multiple-attribute-selector/
https://api.jquery.com/multiple-attribute-selector/
ex. "input[id][name$='man']"specifies both id and name of the element and both conditions must be met. For classes it's as obvious as ".class1.class2" to require object of 2 classes.
前任。"input[id][name$='man']"指定元素的 id 和 name 并且两个条件都必须满足。对于类.class1.class2，需要 2 个类的对象与“ ”一样明显。
All possible combinations of both are valid, so you can easily get equivalent of more sophisticated 'OR' and 'AND' expressions.
两者的所有可能组合都是有效的，因此您可以轻松获得等效于更复杂的“OR”和“AND”表达式。
回答by Bergi
回答by Alejandro D.V.
With pure JavaScript you can do this (such as SQL) and anything you need, basically:
使用纯 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>