是否可以使用多个不相关的条件通过 querySelectorAll 进行搜索？如果是如何？以及如何指定这些是 AND 还是 OR 标准？
例如：
如何找到所有形式的S，p S和传奇s的单querySelectorAll电话吗？可能的？
具有多个条件的 querySelectorAll
IT技术
javascript
2021-01-14 17:23:46
4个回答
是否可以
querySelectorAll使用多个不相关的条件进行搜索？
是的，因为querySelectorAll接受完整的 CSS 选择器，并且 CSS 有选择器组的概念，它可以让您指定多个不相关的选择器。例如：
var list = document.querySelectorAll("form, p, legend");
...将返回一个包含任何元素的列表form 或 p 或 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. 中的元素。”
根据文档，就像任何 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 和 name 并且两个条件都必须满足。对于类.class1.class2，需要 2 个类的对象与“ ”一样明显。
两者的所有可能组合都是有效的，因此您可以轻松获得等效于更复杂的“OR”和“AND”表达式。
使用纯 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>是的，querySelectorAll确实需要一组选择器：
form, p, legend