How to get elements with multiple classes

Question

Say I have this    lt div class  class1 class2  gt  lt  div gt    How do I select this div element   document getElementsByClassName  class1   0  getElementsByClassName  class2   0    That does not work   I know that  in jQuery  it is     class1 class2    but I d like to select it with vanilla JavaScript

User · Answer

As  filoxo said  you can use document querySelectorAll     If you know that there is only one element with the class you are looking for  or you are interested only in the first one  you can use     document querySelector   class1 class2      BTW  while  class1 class2 indicates an element with both classes   class1  class2  notice the whitespace  indicates an hierarchy - and element with class class2 which is inside en element with class class1      lt div class  class1  gt     lt div gt       lt div class  class2  gt                    And if you want to force retrieving a direct child  use  gt  sign   class1  gt   class2     lt div class  class1  gt     lt div class  class2  gt                For entire information about selectors  https   www w3schools com jquery jquery ref selectors asp

User · Answer

AND  both classes   var list   document getElementsByClassName  class1 class2    var list   document querySelectorAll   class1 class2      OR  at least one class   var list   document querySelectorAll   class1  class2      XOR  one class but not the other   var list   document querySelectorAll   class1 not  class2   class2 not  class1       NAND  not both classes   var list   document querySelectorAll   not  class1   not  class2       NOR  not any of the two classes   var list   document querySelectorAll   not  class1  not  class2

User · Answer

It s actually very similar to jQuery   document getElementsByClassName  class1 class2     MDN Doc getElementsByClassName

User · Answer

actually  bazzlebrush  s answer and  filoxo  s comment helped me a lot   I needed to find the elements where the class could be  zA yO  OR  zA zE            Using jquery I first select the parent of the desired elements    a div with class starting with  abc  and style     display none    var tom      div class   abc   style   display  none      0                        then the desired children of that element   var ax   tom querySelectorAll   zA yO   zA zE      works perfectly  note you don t have to do document querySelector you can as above pass in a pre-selected object

User · Answer

Okay this code does exactly what you need   HTML    lt div class  class1  gt nothing happens hear  lt  div gt    lt div class  class1 class2  gt This element will receive yout code  lt  div gt    lt div class  class1  gt nothing happens hear  lt  div gt    JS   function getElementMultipleClasses         var x   document getElementsByClassName  class1 class2        x 0  innerHTML    This is the element you want     getElementMultipleClasses      Hope it helps

User · Answer

querySelectorAll with standard class selectors also works for this    document querySelectorAll   class1 class2

User · Answer

html   lt h2 class  example example2  gt A heading with class  example  lt  h2 gt    javascritp code  var element   document querySelectorAll   example example2    element style backgroundColor    green     The querySelectorAll   method returns all elements in the document that matches a specified CSS selector s   as a static NodeList object   The NodeList object represents a collection of nodes  The nodes can be accessed by index numbers  The index starts at 0   also learn more about https   www w3schools com jsref met document queryselectorall asp     Thank You

[javascript] How to get elements with multiple classes

Examples related to javascript

Examples related to class

Examples related to element