Javascript Dom Get and Set Methods Tutorial in Hindi

by

javascript DOM methods से हम एक webpage के elements को target कर सकतें हैं | Element को target करने के बाद उन nodes के साथ क्या काम कर सकतें हैं, हम इस आर्टिकल में सीखेंगें |

Table of Contents hide
1 DOM Get Methods and Properties
2 DOM Set Methods and Properties
3 innerText
4 innerHTML
5 getAttribute() method
6 getAttributeNode() method
7 attributes
8 setAttribute() method
9 attributes set property
10 removeAttribute()
11 अन्य javascript tutorial के सुझाव

DOM Get Methods and Properties

DOM methods से अलग अलग nodes को target करने के बाद हम उस्की Text, HTML, attribute इन चीजों को get कर सकतें हैं |
इन Text, HTML, attribute values को get करने के लिए javascript में कुछ methods और properties आतें हैं और वो है:

  1. innerText
  2. innerHTML
  3. getAttribute
  4. getAttributeNode
  5. Attributes

DOM Set Methods and Properties

DOM SET methods से nodes के Text, HTML या attribute get करने के बाद उसे dynamically दूसरी value दे सकतें हैं |
इन values को set करने के लिए javascript में अलग अलग properties आतें हैं और वो है:

  1. innerText
  2. innerHTML
  3. setAttribute
  4. Attribute
  5. removeAttribute

innerText

innerText के जरिये किसी DOM node और उसकी descendants nodes की text content को fetch कर सकते हैं | और dynamically उसमे नयी value डाल सकते हैं |

उदाहरण

<!Doctype html>
<html>
<head>
 <title>Get and Set Value</title>
</head>
<body>
 <h1 id="h">Hello</h1>
 <script>
  var val = document.getElementById("h").innerText;
  console.log(val);
 </script>
</body> 
</html>

output

innerText Get Property Example

Dynamically DOM के किसी node में text change करने के लिए document.getElementById(“node“).innerText command को right side लिखी जाती है और equal sign बाद नयी value दी जाती है |

node उस element या object को target करता है जिसे नयी text दी जानी होती है |

उदाहरण

var h=document.getElementById("h").innerText; // Get Value

document.getElementById("h").innerText = "Welcome"; //set value

output

innerText Set Property Example

output में देखिये heading में innerText के जरिये एक नयी value set किये हैं | innerText property value get करने और value set करने दोनों में काम आती है |

innerHTML

innerHTML से किसी element का, पूरा HTML fetch कर सकते हैं | और इसी property के जरिये किसी element का html content में बदलाव ला सकतें हैं |

उदाहरण

<!Doctype html>
<html>
<head>
 <title>Get and Set Value</title>
</head>
<body>
 <div id="div1">
  <h1 id="header">This is a heading</h1>
  <p>This is a paragraph</p>
 </div>
 <script>
  var h = document.getElementById("div1").innerHTML;
  console.log(h);
 </script>
</body> 
</html>

output

innerHTML GET Property Example

ऊपर के उदाहरण में देखिये हमने div element जिसकी id “div1” है उसकी पूरी html content को get किया | जिसका output आप console tab में देख रहें हैं |

अब इसी element का html content को कैसे नए value से सेट करेंगे वो देखेंगे |

उदाहरण

document.getElementById("div1").innerHTML="<h2>New JS Heading</h2>";

output

innerHTML Set Property Example

उदाहरण में देखिये, console tab में document.getElementById(“div1”).innerHTML command के जरिये div tag में हमने एक नया <h1> element add किया है |

getAttribute() method

html में हर element का कुछ ना कुछ attribute होती है | और उस attribute को name, value pair से लिखी जाती है | getAttribute() method से किसी attribute name की value को fetch करने के लिए उपयोग होता है |

Syntax:
element.getAttribute(attributename)

उदाहरण

<!Doctype html>
<html>
 <head>
  <style>
   .red{color:red;}
   .green{color:green;}
  </style>
 </head>
 <body>
  <h1 id="heading" class="red">This is a Heading text</h1>
</body>
</html>

उदाहरण में देखिये हमने एक h1 tag लिया है जिसकी id और class दो attributes हैं | अब हम getAttribute() method से उन attribute की value को fetch करेंगे |

<script>
   console.log(document.getElementsByTagName("h1")[0].getAttribute("id"));
   console.log(document.getElementsByTagName("h1")[0].getAttribute("class"));   
 </script>

output

DOM getAttribute Example

getAttributeNode() method

getAttributeNode() method से element की attribute को fetch कर सकतें हैं |

Syntax:
element.getAttributeNode(attributename).value

उदाहरण

document.getElementById("heading").getAttributeNode("id")
document.getElementById("heading").getAttributeNode("id").value

getAttributeNode() method, getAttribute() method की तरह काम करता है | पर getAttributeNode() name और value दोनों return करता है | और अगर सिर्फ value चाहिए हो तो .value लिखनी पड़ती है |

getAttribute Method Example

attributes

attributes एक DOM get property है जिससे किसी element की सारे attributes list निकाल सकतें हैं | ये property, element की सारे attributes को एक collection बना कर return करता है | और उस collection में किसी एक attribute को target करनी हो तो square bracket में index position दे कर उसे fetch कर सकते हैं |

उदाहरण

<!Doctype html>
<html>
 <head>
  <style>
   .red{color:red;}
  </style>
 </head>
 <body>
  <h1 id="heading" class="red" style="border:1px solid blue;">This is a Heading text</h1>
  <script>
   var a=document.getElementById("heading").attributes; // get attributes list
   var b=document.getElementById("heading").attributes[1]; // get 2nd attribute
   var c=document.getElementById("heading").attributes[1].value;// get 2nd attribute value
   console.log(a);
   console.log(b);
   console.log(c);
  </script>
</body>
</html>

उदाहरण में देखिये heading id के सारे attributes को get किया है और एक particular attribute और उसकी value को document.getElementById(“heading”).attributes[1].value के जरिये fetch किया है |

output

attributes method example

setAttribute() method

setAttribute() method एक element की attribute value को बदलने के लिए उपयोग होता है | इस method के जरिये element में कोई नयी attribute भी लगा सकतें हैं |

Syntax:
element.setAttribute(attributename)

उदाहरण

<!Doctype html>
<html>
 <head>
  <style>
   .red{color:red;}
   .green{color:green;}
  </style>
 </head>
 <body>
  <h1 id="heading" class="red">This is a Heading text</h1>
  <script>
   var a = document.getElementById("heading").setAttribute("class", "green");
  </script>
</body>
</html>

उदाहरण में देखिये heading में red class लगी है | पर setAttribute() method के जरिये हमने इसमें green class लगाया जिससे text color green हो गया है |

output

setAttribute Method Example

attributes set property

attributes जैसे DOM get method में सारे attributes list देता है और किसी एक attribute को target भी करता है | वैसे ही DOM set methods में इस property से किसी attribute को नयी value से set की जा सकती है |

उदाहरण

<!Doctype html>
<html>
 <head>
  <style>
   .red{color:red;}
  </style>
 </head>
 <body>
  <h1 id="heading" class="red" style="border:1px solid;">This is a Heading text</h1>
  <script>
   var a = document.getElementById("heading").attributes[2].value="border:2px dashed green;";
  </script>
</body>
</html>

उदाहरण में देखिये heading के border को attributes property के जरिये नयी value से set किया गया है |

output

DOM attributes set property

removeAttribute()

removeAttribute() method से किसी element की attribute को javascript code के जरिये हटाने यानि delete करने के लिए उपयोग होता है | html में attribute तो रहेगा पर javascript के जरिये किसी attribute को remove करना है तो इस method का इस्तेमाल होता है |

Syntax:
element.removeAttribute(attributename)

उदाहरण

<!Doctype html>
<html>
 <head>
  <style>
   .red{color:red;}
  </style>
 </head>
 <body>
  <h1 id="heading" class="red" style="border:1px solid black;">This is a Heading text</h1>  
</body>
</html>

उदाहरण में देखिये h1 tag में 3 attributes लगी है | जिसका output निचे देखिये |

अब removeAttribute method के जरिये style attribute को delete करेंगे |

<script>
  document.getElementById("heading").removeAttribute("style");   
</script>

output में देखिये heading की border attribute remove हो चुकी है | इसीलिए कोई border दिखाई नहीं दे रही है |

अन्य javascript tutorial के सुझाव