具有多个条件

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

例如:

如何找到所有的 表格，P和 传奇与一个单一的 所有呼叫? 可能吗？

218357 次浏览
小开
最佳答案

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

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

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元素，以及任何同样包含在 div中的 legend元素。”

小开

是的，querySelectorAll确实需要 选择器组选择器组:

form, p, legend
小开

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

此示例返回文档中所有 div 元素的列表 带有一类“注意”或“警告”:

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”需要两个类的对象。

两者的所有可能组合都是有效的，因此您可以很容易地获得更复杂的“ 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>

小开

仅仅使用 document.querySelectorAll('selector1, selector2, selector3')对我来说不起作用，必须同时使用 forEach()方法才能达到预期的效果。

document.querySelectorAll('selector1, selector2, selector3').forEach(item => {
item.//code
})


document.querySelectorAll('#id1, #id2, #id3').style = 'background-color: red';
document.querySelectorAll('#id4, #id5, #id6').forEach(item => {
item.style = 'background-color: red';
})
<div id="id1">id1</div>
<div id="id2">id2</div>
<div id="id3">id3</div>
<div id="id4">id4</div>
<div id="id5">id5</div>
<div id="id6">id6</div>


提交答案