How to get elements with multiple classes

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



How to get elements with multiple classes



Say I have this:


<div class="class1 class2"></div>



How do I select this div element?


div


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.


$('.class1.class2')




6 Answers
6



It's actually very similar to jQuery:


document.getElementsByClassName('class1 class2')



MDN Doc getElementsByClassName





and wow am i stupid or what?
– Nathan Prometheus
Aug 25 '11 at 3:15





I say what my friend, everyone has something to learn.
– Joe
Aug 25 '11 at 3:16



querySelectorAll with standard class selectors also works for this.


document.querySelectorAll('.class1.class2');





That doesn't work, it needs to be document.querySelectorAll('.class1, .class2');
– bazzlebrush
Apr 18 '17 at 19:59


document.querySelectorAll('.class1, .class2');





@bazzlebrush your selector would capture elements with .class1 OR .class2, while the one above would only capture elements with both classes and does in fact work. See the console output of this test: jsfiddle.net/0ph1p9p2
– filoxo
Apr 18 '17 at 20:23


.class1


.class2





Ok, my bad, I misunderstood what the OP wanted to do. But IMO a more typical use case is to want to select elements which have either class or both, in which case my example is what you want.
– bazzlebrush
Apr 18 '17 at 20:56



As @filoxo said, you can use document.querySelectorAll.


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:


.class1.class2


.class1 .class2


class2


class1


<div class='class1'>
<div>
<div class='class2'>
:
:



And if you want to force retrieving a direct child, use > sign (.class1 > .class2):


>


.class1 > .class2


<div class='class1'>
<div class='class2'>
:
:



For entire information about selectors:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp



Okay this code does exactly what you need:



HTML:


<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>



JS:


function getElementMultipleClasses()
var x = document.getElementsByClassName("class1 class2");
x[0].innerHTML = "This is the element you want";

getElementMultipleClasses();



Hope it helps! ;)



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.



html


<h2 class="example example2">A heading with class="example"</h2>



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 ==






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS