How to set dome value ?

DOM के value को set करने के लिए मुख्य रूप से 7 element / method का use किया जाता है |

Some important method for dom set value

innerText
innerHTML
setAttribute
removeAttribute

1. How to set value by “innerText” ?

इसके द्वारा किसी element के inner text को change या remove किया जाता है |

Syntax :

.innerText= “here set your content”

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
   <h1>Set Dom Value</h1>
    <h2>First heading</h1>
    <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>

    <h2>Second heading</h1>
    <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>


    <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>

    <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>


    <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>
    </article>


<script type="text/javascript">
//Example 1.  using with querySelector
 var a =  document.querySelector("#idcontainer .content_class h2");
 a.innerText ="Welcome to Our Website";

 //Example 2.  using with querySelectorAll & his indexing
 var b =  document.querySelectorAll("#idcontainer .content_class h2")[1];
 b.innerText ="Welcome to Our Website";

 
//Example 2.  remove element text by javascript
 var c =  document.querySelector("#idcontainer .content_class p");
 c.innerText =" "; 
</script>

2 . What is the work of “innerHTML” ?

यह किसी Inner text के साथ - साथ उसके tag को भी return करता है ।

Syntax :

.innerHTML= “here set your content”

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
   <h1>Set Dom Value</h1>
    <h2>First heading</h1>
    <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>

    <h2>Second heading</h1>
    <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>


    <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>

    <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>


    <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>
    </article>


<script type="text/javascript">
//example 1. chang element name & his text by javascript 
var a =  document.querySelector("#idcontainer .content_class h2");
a.innerHTML ="<strong>Hello<strong>";
console.log(a);

//example 2. chang element name & his text by javascript 
var b =  document.querySelector("#idcontainer .content_class p");
b.innerHTML ="<span>Hello<span>";
console.log(b);
</script>

3 . What is the work of “setAttribute” ?

इसके द्वारा हम किसी attribute के value को set करते हैं ।

Syntax :

.setAttribute('attribute_Name', value of attribute' )

know about attrribut about his value Click here

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
   <h1>Set Dom Value</h1>
    <h2>First heading</h1>
    <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>

    <h2>Second heading</h1>
    <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>


    <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>

    <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>


    <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>
    </article>


<script type="text/javascript">
//example 1. change anchor href value (using querySelector)
var a =  document.querySelector("#idcontainer .content_class a");
a.setAttribute("href", "https://www.teachcoders.com/");
console.log(a);

//example 2. change anchor class value (using querySelectorAll)
var b =  document.querySelectorAll("#idcontainer .content_class a")[1];
b.setAttribute("class", "teachcoder_btn");
console.log(b);
</script>

4 . What is the work of “removeAttribute” ?

इसका use किसी attribute के value को remove करने के लिया किया जाता है ।

Syntax :

.removeAttribute('attribute_Name', value of attribute' )

  
  <article class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
   <h1>Set Dom Value</h1>
    <h2>First heading</h1>
    <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>

    <h2>Second heading</h1>
    <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>


    <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>

    <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>


    <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>
    </article>


<script type="text/javascript">
//example 1. remove anchor href value (using querySelector)
var a =  document.querySelector("#idcontainer .content_class a");
a.removeAttribute("href", "readfirst.html");
console.log(a);

//example 2. remove anchor class value (using querySelectorAll)
var b =  document.querySelectorAll("#idcontainer .content_class a")[1];
b.removeAttribute("class", "my-btn");
console.log(b);
</script>