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");
    }

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Any help is gladly appreciated. Thanks

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

CodePudding user response：

You can try with jquery

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