是否可以使用多个不相关的条件通过querySelectorAll进行搜索？如果有,怎么样？以及如何指定这些是AND还是OR标准？
例如:
如何使用单个querySelectorAll调用查找所有表单 s,p s和图例？可能？
T.J*_*der 112
是否可以
querySelectorAll使用多个不相关的条件进行搜索？
是的,因为querySelectorAll接受完整的CSS选择器,而CSS具有选择器组的概念,它允许您指定多个不相关的选择器.例如:
var list = document.querySelectorAll("form, p, legend");
...将返回一个包含任何元素的列表,form 或者是 p 或 legend.
CSS还有另一个概念:基于更多标准的限制.您只需组合选择器的多个方面.例如:
var list = document.querySelectorAll("div.foo");
...将返回同时(和)拥有该类的所有div元素的列表,忽略其他元素.foodiv
当然,你可以将它们结合起来:
var list = document.querySelectorAll("div.foo, p.bar, div legend");
...这意味着"包括任何div具有foo该类的p元素,任何具有bar该类的legend元素,以及也在其中的任何元素div."
mik*_*kus 10
根据文档,就像使用任何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/
恩."input[id][name$='man']" 指定元素的id和名称,并且必须满足两个条件.对于类来说.class1.class2,要求2个类的对象就像" " 一样明显.
两者的所有可能组合都是有效的,因此您可以轻松获得更复杂的"OR"和"AND"表达式.
小智 9
使用纯 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>小智 6
\n例如有如下所示的2种形式：
\n<form class="form1" method="post">\n <input type="text" id="input1" name="fruits" value="Apple">\n <p id="p1">Orange</p>\n</form>\n<form class="form2" method="post">\n <input type="text" id="input2" name="fruits" value="Banana">\n <p id="p2">Kiwi</p>\n</form>\n然后，您可以选择苹果<input>和香蕉<input>，如下[name="fruits"]所示：
document.querySelectorAll(\'[name="fruits"]\');\n// Apple\'s <input> and Banana\'s <input>\n现在，通过指定不带逗号的元素和属性，您可以仅选择Apple 的，<input>如下所示：
// \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \ndocument.querySelectorAll(\'form.form1 input[name="fruits"][id="input1"]\');\n// Apple\'s <input>\n另外，还可以替换.form1为[class="form1"]和[id="input1"]with #input1，如下所示：
// .form1 [id="input1"]\n // \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93\ndocument.querySelectorAll(\'form[class="form1"] input[name="fruits"]#input1\');\n// Apple\'s <input>\n接下来，您可以选择Apple 的<input>，#input1如下所示：
document.querySelectorAll(\'#input1\');\n// Apple\'s <input>\n现在，通过用逗号指定元素和属性，您可以选择Apple's<input>、Orange's<p>、Banana's<input>和Kiwi's ，<p>如下所示：
// \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \xe2\x86\x93 \ndocument.querySelectorAll(\'#input1, #input2, p\');\n // \xe2\x86\x91 \xe2\x86\x91\n// Apple\'s <input>, Orange\'s <p>, Banana\'s <input> and Kiwi\'s <p>\n另外，当然，您可以同时使用逻辑与和逻辑或，如下所示：
\ndocument.querySelectorAll(\'input#input1, input#input2, p#p1\')[\n// Apple\'s <input>, Orange\'s <p> and Banana\'s <input> \nUsing just document.querySelectorAll('selector1, selector2, selector3') didn't work for me, had to use forEach() method alongside to achieve the desired result.
document.querySelectorAll('selector1, selector2, selector3').forEach(item => {
item.//code
})
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';
})| 归档时间： |
|
| 查看次数： |
67642 次 |
| 最近记录： |