Q. What is DOM className method () ?

Example 1. (className Method By Query Selector)

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>
<div>

  <h2>First heading</h2>
  <p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. <a href="readfirst.html" class="my-btn">More First</a></p>
  </div>


  <div>
  <h2>Second heading</h2>
  <p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. <a href="readsecond.html" class="my-btn">More Seond</a> </p>
  </div>

  <div>
  <h2>Third heading</h2>
  <p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. <a href="readthird.html" class="my-btn">More Third</a> </p>
  </div>

  <div>
  <h2>Forth  heading</h2>
  <p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. <a href="readforth.html" class="my-btn">More Forth</a></p>
  </div>

  <div>
  <h2>Fifth  heading</h2>
  <p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. <a href="readfifth.html" class="my-btn">More Fifth</a></p>
  </div>
</div>
</article>
  

<script type="text/javascript">
var a = document.querySelector("#idcontainer .content_class div");
a.className="box-class";
console.log(a);
</script>




<style type="text/css">
.box-class{
  background:lightblue;
  padding:15px;
  margin-bottom:15px;
  border:solid 2px darkblue;
}
.box-class h2{
  border-bottom:dashed 1px darkblue;
  padding-bottom:15px;
  margin-bottom:15px;
}
</style>

Example 2 . (className Method by querySelectorAll with forEach)

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>
<div>

  <h2>First heading</h2>
  <p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. <a href="readfirst.html" class="my-btn">More First</a></p>
  </div>


  <div>
  <h2>Second heading</h2>
  <p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. <a href="readsecond.html" class="my-btn">More Seond</a> </p>
  </div>

  <div>
  <h2>Third heading</h2>
  <p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. <a href="readthird.html" class="my-btn">More Third</a> </p>
  </div>

  <div>
  <h2>Forth  heading</h2>
  <p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. <a href="readforth.html" class="my-btn">More Forth</a></p>
  </div>

  <div>
  <h2>Fifth  heading</h2>
  <p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. <a href="readfifth.html" class="my-btn">More Fifth</a></p>
  </div>
</div>
</article>
  

<script type="text/javascript">
// All Element class by querySelectorAll

var a = document.querySelectorAll("#idcontainer .content_class div");
a.forEach(myfunc);
function myfunc(divstl){
 divstl.className="box-class"
}

</script>

<style type="text/css">
.box-class{
  background:lightblue;
  padding:15px;
  margin-bottom:15px;
  border:solid 2px darkblue;
}
.box-class h2{
  border-bottom:dashed 1px darkblue;
  padding-bottom:15px;
  margin-bottom:15px;
}
</style>