複数の条件を指定したquerySelectorAll

Question

複数の無関係な条件を使用してquerySelectorAllで検索することはできますか？はいの場合はどうですか？それらがAND基準かOR基準かどうかを指定する方法は？例えば

：

すべてフォーム S、P sおよび伝説単一querySelectorAllコールと Sを見つける方法は？可能？

Answer 1

複数の無関係な条件を使用してquerySelectorAllで検索することはできますか？

はい

、 querySelectorAllがフルCSSセレクタを受け入れ、CSSを使用して、複数の無関係なセレクタを指定することができます selector groupsの概念を、持っているので。例えば：

var list = document.querySelectorAll("form, p, legend"); 

は... formまたはpまたはlegendある任意の要素を含むリストを返します。

CSSにはもう1つの概念があります。より多くの基準に基づいて制限すること。セレクタの複数の要素を組み合わせるだけです。例えば：

var list = document.querySelectorAll("div.foo"); 

... も（とが）他のdivの要素を無視して、クラスfooを持っていることをすべてdiv要素のリストを返します。

あなたは、もちろん、それらを組み合わせることができます。

var list = document.querySelectorAll("div.foo, p.bar, div legend"); 

...「もfooクラス、またbarクラスを持つすべてのp要素を持っており、任意のlegend任意のdiv要素を含めることを意味します要素はdivの内部にもあります。

Answer 2

はい、querySelectorAllはgroup of selectorsを取るん：あなたが望むよう

form, p, legend 

Answer 3

をドキュメントによると、ちょうど任意のCSSセレクタと同じように、あなたはできるだけ多くの条件を指定することができ、そしてそれらは論理「OR」として扱われます。

この例では、 "ノート" のいずれかのクラスまたは "警告" と文書 内のすべてのdiv要素のリストを返します。

var matches = document.querySelectorAll("div.note, div.alert"); 

元：一方https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

へjqueryは次のように「AND」機能を使用できます。たとえば、jqueryは次のように表現します。

https://api.jquery.com/multiple-attribute-selector/

ex。 "input[id][name$='man']"は、要素のidとnameの両方を指定し、両方の条件を満たす必要があります。クラスの場合、2クラスのオブジェクトを要求するのは ".class1.class2"のように明白です。

両方の可能な組み合わせがすべて有効であるため、より洗練された「OR」と「AND」式を簡単に同等にすることができます。