Practice Code
JavaScript Example (Program)
Learn Details

Q. What is dom classList method () ?

इसका use dom के अंदर class css की तरह use किया जाता है।

Syntax with classList :

attributename.classList

इस classList के भी अलग -अलग method होते हैं | जिसके Syntax इस type से होते हैं

  • .classList[index]
  • .classList.item(index)
  • .classList.add("class1", "Class2", ...)
  • .classList.remove("class_name")
  • .classList.replace("find_class_name", "replace_class_name")
  • .classList.length
  • .classList.contains
  • .classList.toggle("toggleClassName")

Example classList[index]

इसके द्वारा किसी element के साथ class name के index को find किया जाता है।

HTML Code


<article id="idcontainer" class="class_container" style="margin-top: 35px;">
<div class="content_class">
<h1>Set Dom Value</h1>
<div class="teach coders tutorial">
<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 class="my-btn">More First</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readsecond.html">More Seond</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readthird.html">More Third</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readforth.html">More Forth</a></p>

</div>
<div class="teach coders tutorial">
<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 class="my-btn" href="readfifth.html">More Fifth</a></p>
</div>

</div>
</article>

Javascript Code


  <script type="text/javascript">
  //find index of class name
  var a = document.querySelector("#idcontainer .content_class .teach").classList[0];
  console.log(a);
</script>

Example .classList.add

इसके द्वारा किसी element के साथ class name को add किया जाता है।

HTML Code

       

<article id="idcontainer" class="class_container" style="margin-top: 35px;">
<div class="content_class">
<h1>Set Dom Value</h1>
<div class="teach coders tutorial">
<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 class="my-btn">More First</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readsecond.html">More Seond</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readthird.html">More Third</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readforth.html">More Forth</a></p>

</div>
<div class="teach coders tutorial">
<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 class="my-btn" href="readfifth.html">More Fifth</a></p>
</div>

</div>
</article>

Javascript Code


  <script type="text/javascript">
  //add singale or multiple class name such as("boxclass", "paddingclass")
  var a = document.querySelector("#idcontainer .content_class .teach").classList.add("boxclass", "paddingclass", "color");
</script>

Css Code


 <style>
.boxclass{
  background:darkblue;
}
.paddingclass{
  padding:15px;
}
.color{
  color:white;
}
</style>

Example .classList.remove

इसके द्वारा किसी element के class name को remove किया जाता है।

HTML Code

       

<article id="idcontainer" class="class_container" style="margin-top: 35px;">
<div class="content_class">
<h1>Set Dom Value</h1>
<div class="teach coders tutorial">
<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 class="my-btn">More First</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readsecond.html">More Seond</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readthird.html">More Third</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readforth.html">More Forth</a></p>

</div>
<div class="teach coders tutorial">
<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 class="my-btn" href="readfifth.html">More Fifth</a></p>
</div>

</div>
</article>

Javascript Code


  <script type="text/javascript">
  //this code add multiple class name
    var a = document.querySelector("#idcontainer .content_class .teach").classList.add("boxclass", "paddingclass", "color");
   var 
   //remove any type singale or multiple class name
   b = document.querySelector("#idcontainer .content_class .teach").classList.remove("color", "paddingclass" "boxclass", "coders");
</script>

Css Code


 <style>
.boxclass{
  background:darkblue;
}
.paddingclass{
  padding:15px;
}
.color{
  color:white;
}
</style>

Example .classList.length

इसके द्वारा class के length को return किया जाता है ।

HTML Code

       

<article id="idcontainer" class="class_container" style="margin-top: 35px;">
<div class="content_class">
<h1>Set Dom Value</h1>
<div class="teach coders tutorial">
<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 class="my-btn">More First</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readsecond.html">More Seond</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readthird.html">More Third</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readforth.html">More Forth</a></p>

</div>
<div class="teach coders tutorial">
<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 class="my-btn" href="readfifth.html">More Fifth</a></p>
</div>

</div>
</article>

Javascript Code


  <script type="text/javascript">
  var a = document.querySelector("#idcontainer .content_class .teach").classList.length;
  console.log(a);
 
</script>

Example .classList.toggle

इसके द्वारा किसी element में class name को add या remove करने के लिए किया जाता है। जिसे mostly किसी event (like click ) के साथ किया जाता है।

HTML Code

       

<article id="idcontainer" class="class_container" style="margin-top: 35px;">
<div class="content_class">
<h1>Set Dom Value</h1>
<div class="teach coders tutorial">
<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  onclick="myfunc()" class="my-btn">More First</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readsecond.html">More Seond</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readthird.html">More Third</a></p>
</div>

<div class="teach coders tutorial">
<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 class="my-btn" href="readforth.html">More Forth</a></p>

</div>
<div class="teach coders tutorial">
<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 class="my-btn" href="readfifth.html">More Fifth</a></p>
</div>

</div>
</article>

Javascript Code


  <script type="text/javascript">
  function myfunc(){
    var a = document.querySelector("#idcontainer .content_class .teach").classList.toggle("mybox")
  }
</script>

Css Code


 <style>
.mybox{
    background: lightblue;
    padding: 15px;
    border: solid 1px #000;
}
</style>