複数の条件を持つquerySelectorAll

Question 1

複数の無関係な条件を使用してquerySelectorAllで検索することは可能ですか？はいの場合、どのように？そして、それらがANDまたはOR基準であるかどうかを指定する方法は？

例えば：

すべて見つけるにはどのようにフォームS、P sおよび伝説のシングルとquerySelectorAllのコールを？可能？

Question 2

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。」

Question 3

ドキュメントによると、他のcssセレクターと同様に、必要な数の条件を指定でき、それらは論理「OR」として扱われます。

この例では、「note」または「alert」のいずれかのクラスを持つドキュメント内のすべての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場合、2つのクラスのオブジェクトを要求することは「」と同じくらい明白です。

両方の可能な組み合わせはすべて有効であるため、より洗練された「OR」および「AND」式に相当するものを簡単に取得できます。

Question 4

はい、セレクターのグループを querySelectorAll取ります：

form, p, legend

Question 5

純粋な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>

スニペットを展開