querySelectorAll with multiple conditions

Question

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   For example   How to find all forms  ps and legends with a single querySelectorAll call  Possible

User · Answer

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       This example returns a list of all div elements within the document   with a class of either  note  or  alert     var matches   document querySelectorAll  div note  div alert      source  https   developer mozilla org en-US docs Web API Document querySelectorAll  Meanwhile to get the  AND  functionality you can for example simply use a multiattribute selector  as jquery says   https   api jquery com multiple-attribute-selector   ex   input id  name   man     specifies both id and name of the element and both conditions must be met  For classes it s as obvious as   class1 class2  to require object of 2 classes    All possible combinations of both are valid  so you can easily get equivalent of more sophisticated  OR  and  AND  expressions

User · Answer

Yes  querySelectorAll does take a group of selectors   form  p  legend

User · Answer

With pure JavaScript you can do this  such as SQL  and anything you need  basically    x000D   x000D   lt html gt  x000D   x000D   lt body gt  x000D   x000D   lt input type  button  value  F3  class  c2  id  btn 1  gt  x000D   lt input type  button  value  F3  class  c3  id  btn 2  gt  x000D   lt input type  button  value  F1  class  c2  id  btn 3  gt  x000D   x000D   lt input type  submit  value  F2  class  c1  id  btn 4  gt  x000D   lt input type  submit  value  F1  class  c3  id  btn 5  gt  x000D   lt input type  submit  value  F2  class  c1  id  btn 6  gt  x000D   x000D   lt br  gt  x000D   lt br  gt  x000D   x000D   lt button onclick  myFunction    gt Try it lt  button gt  x000D   x000D   lt script gt  x000D      function myFunction    x000D        x000D          var arrFiltered   document querySelectorAll  input value F2  type submit  class c1     x000D   x000D              arrFiltered forEach function  el  x000D                                x000D                  var node   document createElement  p    x000D                   x000D                  node innerHTML   el getAttribute  id    x000D   x000D                  window document body appendChild node   x000D                  x000D            x000D       lt  script gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Is it possible to make a search by querySelectorAll using multiple unrelated conditions    Yes  because querySelectorAll accepts full CSS selectors  and CSS has the concept of selector groups  which lets you specify more than one unrelated selector  For instance   var list   document querySelectorAll  form  p  legend         will return a list containing any element that is a form or p or legend   CSS also has the other concept  Restricting based on more criteria  You just combine multiple aspects of a selector  For instance   var list   document querySelectorAll  div foo         will return a list of all div elements that also  and  have the class foo  ignoring other div elements   You can  of course  combine them   var list   document querySelectorAll  div foo  p bar  div legend         which means  Include any div element that also has the foo class  any p element that also has the bar class  and any legend element that s also inside a div

[javascript] querySelectorAll with multiple conditions

Examples related to javascript