javascript document.querySelectorAll

user_12303976 0
Viewed 82

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.

html javascript
3 Answers

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.

user_74863130

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>

user_94925130

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");
Admin1
Related