CODEWITHSUNDEEP
javascripthtml
Emelio Steve Malisa
Emelio Steve Malisa

Reputation: 23

javascript document.querySelectorAll

What i am trying to do here is modifying the element and adding attribute (class) using JS.

JS Script

  var x = document.querySelectorAll(".clearfix div");
  x[0].setAttribute("class", "regDesign");
  x[1].setAttribute("class", "regDesign");

HTML Default Format

<div class="clearfix">
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    a lot of divs here
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    a lot of divs here
</div>
</div>

HTML Result

<div class="clearfix">
    <div class="regDesign">
        <div class="regDesign"></div>
    </div>  
    <div>
        <div></div>
    </div>
</div>

Desired HTML Result

<div class="clearfix">
    <div class="regDesign">
        <div></div>
    </div>  
    <div class="regDesign">
        <div></div>
    </div>
</div>

Thank you for helping.

Upvotes: 2

Views: 107

Answers (3)

keidakida
keidakida

Reputation: 731

You can do something like this for any number of <div>
For adding classes, use classList.add() instead of setAttribute() 

var x = document.querySelectorAll(".clearfix > div");
for(let i = 0; i < x.length; i++) {
  x[i].classList.add("regDesign");
}

console.log(document.getElementsByClassName("clearfix")[0].innerHTML);
<div class="clearfix">
    <div>
        <div></div>
    </div>  
    <div>
        <div></div>
    </div>
</div>

Upvotes: 1

user14100931
user14100931

Reputation:

This will do it dynamically, even if there is more than one div in each div:

var x = document.querySelectorAll(".clearfix>div");
x[0].setAttribute("class", "regDesign");
x[1].setAttribute("class", "regDesign");

Upvotes: 0

Majed Badawi
Majed Badawi

Reputation: 28404

You can modify the selector as follows:

var x = document.querySelectorAll(".clearfix > div");
x[0].setAttribute("class", "regDesign");
x[1].setAttribute("class", "regDesign");

console.log(document.getElementsByClassName("clearfix")[0].innerHTML);
<div class="clearfix">
    <div>
        <div></div>
    </div>  
    <div>
        <div></div>
    </div>
</div>

You can read more here.

Upvotes: 2

Related Questions