Q. How to dow get value ?

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

Some important element / method

• innerText
• innerHTML
• getAttribute
• getAttributeNode
• attribute

1. What is the work of “innerText” ?

यह किसी HTML tag के Inner text को return करता है। मतलब की यह without html tag के सिर्फ text (content) को return करता है

  <header  class="header_class" id="topheader">
   <div class="logo"><img src="https://www.teachcoders.com/images/logo.png"></div>
   <nav>
      <ul>
         <li><a href="home.html">Home</a></li>
         <li><a href="about-us.html">About Us</a></li>
         <li><a href="Services.html">Services</a></li>
         <li><a href="Contact.html">Contact Us</a></li>
      </ul>
   </nav>
</header>        
<div class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
      <h1>first heading</h1>
      <p>This is first content</p>
   </div>
</div>

Javascript

<script>
//example 1
var a = document.querySelector("#topheader nav ul").innerText;
console.log(a);
//example 2
var b = document.querySelector("#topheader nav ul li").innerText;
console.log(b);
//example 3 (getElementBYId)
var c = document.getElementById("idcontainer").innerText;
console.log(c);
</script>

2. What is the work of “innerHTML” ?

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

  <header  class="header_class" id="topheader">
   <div class="logo"><img src="https://www.teachcoders.com/images/logo.png"></div>
   <nav>
      <ul>
         <li><a href="home.html">Home</a></li>
         <li><a href="about-us.html">About Us</a></li>
         <li><a href="Services.html">Services</a></li>
         <li><a href="Contact.html">Contact Us</a></li>
      </ul>
   </nav>
</header>        
<div class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
      <h1>first heading</h1>
      <p>This is first content</p>
   </div>
</div>

Javascript

<script>
//example 1
var a = document.querySelector("#topheader nav ul").innerHTML;
console.log(a);
//example 2
var b = document.querySelector("#topheader nav ul li").innerHTML;
console.log(b);
//example 3 (getElementBYId)
var c = document.getElementById("idcontainer").innerHTML;
console.log(c);
</script>

3. What is the work of “getAttribute” ?

यह किसी Html के attribute के value return करता है ।

  <header  id="topheader" class="header_class">
   <div class="logo"><img src="https://www.teachcoders.com/images/logo.png"></div>
   <nav>
      <ul>
         <li><a href="home.html">Home</a></li>
         <li><a href="about-us.html">About Us</a></li>
         <li><a href="Services.html">Services</a></li>
         <li><a href="Contact.html">Contact Us</a></li>
      </ul>
   </nav>
</header>        
<div class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
      <h1>first heading</h1>
      <p>This is first content</p>
   </div>
</div>

Javascript

<script>
//example 1 using with id
var a = document.getElementById('idcontainer').getAttribute("class");
console.log(a);

//example 2 using with querySelector
var b = document.querySelector('#topheader nav ul li a').getAttribute("href");
console.log(b);
</script>

4. What is the work of “getAttributeNode” ?

यह किसी Html के attribute के साथ - साथ उसके value return करता है ।

  <header  id="topheader" class="header_class">
   <div class="logo"><img src="https://www.teachcoders.com/images/logo.png"></div>
   <nav>
      <ul>
         <li><a href="home.html">Home</a></li>
         <li><a href="about-us.html">About Us</a></li>
         <li><a href="Services.html">Services</a></li>
         <li><a href="Contact.html">Contact Us</a></li>
      </ul>
   </nav>
</header>        
<div class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
      <h1>first heading</h1>
      <p>This is first content</p>
   </div>
</div>

Javascript

<script>
//example 1 using with id
var a = document.getElementById('idcontainer').getAttributeNode("class");
console.log(a);

//example 2 using with querySelector
var b = document.querySelector('#topheader nav ul li a').getAttributeNode("href");
console.log(b);
</script>

5. What is the work of attributes ?

यह किसी selected element को array के रूप में सारे attribute को return करता है return करता है। इसलिए हमें उसके indexing (like [0]) का use करके return करता है।

  <header  id="topheader" class="header_class">
   <div class="logo"><img src="https://www.teachcoders.com/images/logo.png"></div>
   <nav>
      <ul>
         <li><a href="home.html">Home</a></li>
         <li><a href="about-us.html">About Us</a></li>
         <li><a href="Services.html">Services</a></li>
         <li><a href="Contact.html">Contact Us</a></li>
      </ul>
   </nav>
</header>        
<div class="class_container" id="idcontainer" style="margin-top:35px">
   <div class="content_class">
      <h1>first heading</h1>
      <p>This is first content</p>
   </div>
</div>

Javascript

<script>
//example 1 using with id
var a = document.getElementById('idcontainer').attributes[0];
console.log(a);

//example 2 using with querySelector
var b = document.querySelector('#topheader nav ul li a').attributes[0];
console.log(b);


//example 2 using with querySelectorAll
var b = document.querySelector('.class_container').attributes[2];
console.log(b);
</script>