Javascript: querySelector only selects 1 div. How do I get it to select all divs with the same class?

Question

I'm using document.querySelector and I need it to select all divs that contains the class "test". So far querySelector selects the first div only successfully.

How do I do that with my current Javascript?

 var removeCurveStroke = document.querySelector('.test'); if(document.querySelector('.test').classList.contains('card-decorator-stroke')){ removeCurveStroke.classList.remove("card-decorator-stroke"); removeCurveStroke.classList.add("brand-curve-stroke"); console.log("Test"); }

Any help is gladly appreciated. Thanks

Answer 1

Use document.querySelectorAll('.test'); Documetnation for querySelectorAll

 document.querySelectorAll('.card-decorator-stroke').forEach(function(removeCurveStroke) { removeCurveStroke.classList.remove("card-decorator-stroke"); removeCurveStroke.classList.add("brand-curve-stroke"); });

 .test{ height: 1rem; background: blue; }.card-decorator-stroke { background: red; }.brand-curve-stroke { background: green; }

 <div class="test"></div> <div class="test card-decorator-stroke"></div>

Answer 2

not recommendable but try document.getElementsByClassName("test")

Answer 3

You can try with jquery

$(".test .card-decorator-stroke").addClass("brand-curve-stroke").removeClass("card-decorator-stroke");