blocks|key|2679439|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2679440|是否可以使用多个不相关的条件通过querySelectorAll进行搜索？|blockquote|offset|length|style|CODE|2679441|2679442|2679443|是的，因为querySelectorAll接受完整的CSS选择器，并且CSS有的概念，它允许您指定多个不相关的选择器。例如：|2679444|var+list+=+document.querySelectorAll("form,+p,+legend");|code-block|syntax|javascript|2679445|...will返回一个列表，其中包含任何属于form+、+p+或+legend的元素。|BOLD|2679446|CSS还有另一个概念:基于更多标准进行限制。您只需组合选择器的多个方面即可。例如：|2679447|var+list+=+document.querySelectorAll("div.foo");|2679448|...will返回同时(和)具有类foo的所有div元素的列表，忽略其他div元素。|2679449|当然，您可以将它们组合起来：|2679450|var+list+=+document.querySelectorAll("div.foo,+p.bar,+div+legend");|2679451|...which表示“包括任何具有foo类的div元素、任何具有bar类的p元素以及任何位于legend中的div元素”。|2679452|entityMap^0|0|G|G|0|0|0|5|G|0|0|M|4|T|1|X|6|R|1|V|1|0|0|0|C|1|H|3|N|3|10|3|0|0|0|H|3|M|3|W|3|11|1|1A|6|1I|3|0^^$0|@$1|2|3|-4|4|5|6|17|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|18|7|@$D|19|E|1A|F|G]]|8|@]|9|$]]|$1|H|3|-4|4|5|6|1B|7|@]|8|@]|9|$]]|$1|I|3|-4|4|5|6|1C|7|@]|8|@]|9|$]]|$1|J|3|K|4|5|6|1D|7|@$D|1E|E|1F|F|G]]|8|@]|9|$]]|$1|L|3|M|4|N|6|1G|7|@]|8|@]|9|$O|P]]|$1|Q|3|R|4|5|6|1H|7|@$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]|$D|1M|E|1N|F|G]|$D|1O|E|1P|F|S]|$D|1Q|E|1R|F|S]]|8|@]|9|$]]|$1|T|3|U|4|5|6|1S|7|@]|8|@]|9|$]]|$1|V|3|W|4|N|6|1T|7|@]|8|@]|9|$O|P]]|$1|X|3|Y|4|5|6|1U|7|@$D|1V|E|1W|F|S]|$D|1X|E|1Y|F|G]|$D|1Z|E|20|F|G]|$D|21|E|22|F|G]]|8|@]|9|$]]|$1|Z|3|10|4|5|6|23|7|@]|8|@]|9|$]]|$1|11|3|12|4|N|6|24|7|@]|8|@]|9|$O|P]]|$1|13|3|14|4|5|6|25|7|@$D|26|E|27|F|G]|$D|28|E|29|F|G]|$D|2A|E|2B|F|G]|$D|2C|E|2D|F|G]|$D|2E|E|2F|F|G]|$D|2G|E|2H|F|G]]|8|@]|9|$]]|$1|15|3|-4|4|5|6|2I|7|@]|8|@]|9|$]]]|16|$]]

<blockquote>
  <p>Is it possible to make a search by <code>querySelectorAll</code> using multiple unrelated conditions?</p>
</blockquote>

<p>Yes, because <code>querySelectorAll</code> accepts full CSS selectors, and CSS has the concept of <a href="http://www.w3.org/TR/css3-selectors/#grouping"><em>selector groups</em></a>, which lets you specify more than one unrelated selector. For instance:</p>

<pre><code>var list = document.querySelectorAll("form, p, legend");
</code></pre>

<p>...will return a list containing any element that is a <code>form</code> <strong>or</strong> <code>p</code> <strong>or</strong> <code>legend</code>.</p>

<p>CSS also has the other concept: Restricting based on more criteria. You just combine multiple aspects of a selector. For instance:</p>

<pre><code>var list = document.querySelectorAll("div.foo");
</code></pre>

<p>...will return a list of all <code>div</code> elements that <em>also</em> (<strong>and</strong>) have the class <code>foo</code>, ignoring other <code>div</code> elements.</p>

<p>You can, of course, combine them:</p>

<pre><code>var list = document.querySelectorAll("div.foo, p.bar, div legend");
</code></pre>

<p>...which means "Include any <code>div</code> element that also has the <code>foo</code> class, any <code>p</code> element that also has the <code>bar</code> class, and any <code>legend</code> element that's also inside a <code>div</code>."</p>


blocks|key|125138|text|是的，querySelectorAll确实接受group+of+selectors|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|125139|form,+p,+legend|code-block|syntax|javascript|125140|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll|1|http://www.w3.org/TR/selectors/#grouping^0|3|G|3|G|0|N|I|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<p>Yes, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" rel="nofollow"><code>querySelectorAll</code></a> does take a <a href="http://www.w3.org/TR/selectors/#grouping" rel="nofollow">group of selectors</a>:</p>

<pre><code>form, p, legend
</code></pre>


blocks|key|2891390|text|根据文档，就像任何css选择器一样，您可以指定任意数量的条件，并且它们被视为逻辑“OR”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2891391|2891392|此示例返回文档中类为"note“或”alert“的所有div元素的列表：|blockquote|2891393|2891394|2891395|var+matches+=+document.querySelectorAll("div.note,+div.alert");|code-block|syntax|javascript|2891396|来源：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll|offset|length|2891397|同时，为了获得'AND‘功能，你可以简单地使用一个多属性选择器，正如jquery所说：|2891398|https://api.jquery.com/multiple-attribute-selector/|2891399|例如。"input[id][name$='man']"指定了元素的id和名称，并且必须同时满足这两个条件。对于类来说，就像".class1.class2“一样，它需要2个类的对象。|style|CODE|2891400|这两者的所有可能组合都是有效的，因此您可以很容易地获得更复杂的“OR”和“and”表达式的等价物。|2891401|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll|1^0|0|0|0|0|0|0|3|22|0|0|0|0|1F|1|0|3|O|1Q|E|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1B|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@$O|1G|P|1H|1|1I]]|A|$]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1K|8|@]|9|@$O|1L|P|1M|1|1N]]|A|$]]|$1|U|3|V|5|6|7|1O|8|@$O|1P|P|1Q|W|X]|$O|1R|P|1S|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1T|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|T]]]]

<p>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'.</p>

<blockquote>
  <p>This example returns a list of all div elements within the document
  with a class of either "note" or "alert":</p>
</blockquote>

<pre><code>var matches = document.querySelectorAll("div.note, div.alert");
</code></pre>

<p>source: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll</a></p>

<p>Meanwhile to get the 'AND' functionality you can for example simply use a multiattribute selector, as jquery says:</p>

<p><a href="https://api.jquery.com/multiple-attribute-selector/" rel="noreferrer">https://api.jquery.com/multiple-attribute-selector/</a></p>

<p>ex. <code>"input[id][name$='man']"</code>  specifies both id and name of the element and both conditions must be met. For classes it's as obvious as "<code>.class1.class2</code>" to require object of 2 classes. </p>

<p>All possible combinations of both are valid, so you can easily get equivalent of more sophisticated 'OR' and 'AND' expressions.</p>


blocks|key|2891426|text|使用纯JavaScript，基本上可以做到这一点(比如SQL)和所需的任何东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2891427|​|2891428|<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>|code-block|syntax|javascript|2891429|2891430|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>With pure JavaScript you can do this (such as SQL) and anything you need, basically:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;body&gt;

&lt;input type='button' value='F3' class="c2" id="btn_1"&gt;
&lt;input type='button' value='F3' class="c3" id="btn_2"&gt;
&lt;input type='button' value='F1' class="c2" id="btn_3"&gt;

&lt;input type='submit' value='F2' class="c1" id="btn_4"&gt;
&lt;input type='submit' value='F1' class="c3" id="btn_5"&gt;
&lt;input type='submit' value='F2' class="c1" id="btn_6"&gt;

&lt;br/&gt;
&lt;br/&gt;

&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;

&lt;script&gt;
    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);
            });
        }
    &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>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?</p>

<p>For example:</p>

<p>How to find all <strong>form</strong>s, <strong>p</strong>s and <strong>legend</strong>s with a single <strong>querySelectorAll</strong> call? Possible?</p>


querySelectorAll with multiple conditions

是否可以使用多个不相关的条件通过querySelectorAll进行搜索？如果是，是如何实现的？以及如何指定这些是And还是or标准？例如：如何通过一个querySelectorAll调用查找所有的forms，ps和legends？有可能吗？

问具有多个条件的querySelectorAll
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有多个条件的querySelectorAllEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有多个条件的querySelectorAll
EN