Javascript DOM Methods in Hindi Tutorial

by

एक webpage जब browser में load होता है तो उसके सारे content हमे DOM tree structure से अलग अलग nodes बनकर कर मिलता है | पर उन nodes को fetch कैसे करें ? अगर उसमे कुछ काम करना है तो कैसे करना होगा?

तो इसके लिए javascript हमे कुछ DOM methods देता है जिससे हम उन nodes को target कर सकतें हैं | इस tutorial में उन methods को पढेंगे |

javascript में कई सारे DOM methods हैं पर उनमें कुछ मुख्य methods है जो element की ID, name attribute, tag और class name के हिसाब से DOM nodes को fetch करता है और वो methods हैं :

  1. getElementById
  2. getElementsByName
  3. getElementsByTagName
  4. getElementsByClassName
Table of Contents hide
1 getElementById
2 getElementsByName
3 getElementsByTagName
4 getElementsByClassName
5 अन्य DOM Methods
6 अन्य javascript tutorial के सुझाव

getElementById

webpage में किसी element को उसके id से access करना है, तब getElementById() method का उपयोग होता है |

html page में एक id बस एक ही element को दी जा सकती है | इसीलिए getElementById() method में दी गयी id से एक ही element return होगा |

javascript DOM method list में सारे method की सुरुआत document prefix से होती है | क्योंकि DOM tree में document root element है | और इसीलिए किसी element को target करने के लिए root element से ही सुरु करनी पड़ती है |

Syntax: document.getElementById(id_name)

नॉटपॉइंट: अगर DOM method में एक से अधिक शब्द हैं तो उस method को camel case में लिखी जाती है | यानि पहला शब्द small letter से सुरु होगा और बाकी के सारे शब्द capital letter से सुरु होगा |

इसीलिए getElementById() method में get शब्द small letter से सुरु हुआ और बाकी के सारे शब्द capital letter से सुरु हुआ है |

उदाहरण

<!doctype html>
<html>
 <head>
  <title>getElementById method example</title>
  <script>
    function Sum()
	{
	 var a1=document.getElementById("txt1").value;
	 var a2=document.getElementById("txt2").value;
	 var res= parseInt(a1)+parseInt(a2);
	 alert(res);
	}
  </script>
 </head>
 <body>
  First Number:<input type="text" id="txt1"><br><br>
  Second Number:<input type="text" id="txt2"><br><br>
  <input type="submit" value="Submit" onclick="Sum()">
 </body>
</html>

output

getElementById Example

ऊपर के उदाहरण में हमने दो textbox लिया है जिन्हें unique id दी गयी है | getElementById() method के जरिये textbox की value को fetch करके, उन दोनों values का addition किया गया है |

getElementsByName

getElementByName() method से document के सारे elements को fetch किया जाता है जिनका name attributes एक सा होता है | इस method से multiple elements, htmlCollection में return होगा |

Syntax: document.getElementByName(name)

उदाहरण

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript getElementsByName Demo</title>
</head>
<body>
<div style="border:1px solid black;">
 <div>
  Check Id:
  <input name="card" type="radio" value="voter card">Voter Card
  <input name="card" type="radio" value="Driving License">Driving License
 </div>
 <hr>
 <div> 
  Gender:
  <input name="gender" type="radio" value="male">Male
  <input name="gender" type="radio" value="female">Female
  </div>
 </div>
</body>
</html>

ऊपर के उदाहरण में दो radio buttons ग्रुप है | हर ग्रुप का एक नाम है और console में javascript command से name attribute के जरिये हर radio button group को target कर सकतें हैं getElementsByName() के जरिये |

document.getElementsByName("card");
document.getElementsByName("card")[0];

output

getElementByName Example

console में हमने “card” name से सारे radio buttons को target किया है जिससे एक collection return हुआ | और उस collection में individual element को square bracket में index no देकर fetch किये हैं |

getElementsByTagName

getElementsByTagName() method document में एक तरह के सारे tags को fetch करता है | इस method से multiple elements return होता है |

Syntax: document.getElementByTagName(tag_name)

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript getElementsByTagName Demo</title>
</head>
<body>
 <h1>javascript tutorial</h1>
  <h2>scripting language</h2>
  <h2>easy client side language</h2> 
</body>
</html>

उदाहरण में देखिये h1 और h2 tag लिया गया है | console tab में getElementsByTagName() method के जरिये हम h2 tags को target करेंगे |

document.getElementsByTagName("h2");
document.getElementsByTagName("h2")[1];

ouput

javascript getElementsByTagName Example

getElementsByClassName

getElementsByClassName() method document में उन सारे elements को fetch करता है जहां same css class लगाया गया हो |

Syntax: document.getElementsByClassName(class_name)

उदाहरण

<!DOCTYPE html> 
<html>
<body>
 <h2 class="flower">Rose Collection</h2>
 <div>
  <p>Red Rose</p>
  <p>Pink Rose</p>
  <p class="flower">yellow Rose</p>
  <p>White Rose</p>
 </div>
 <script>
   var test = document.getElementsByClassName("flower");
   console.log(test);
   var testTarget = document.getElementsByClassName("flower")[0];
   console.log(testTarget);
 </script>
</body>
</html>

output

Javascript getElementsByClassName Example

अन्य DOM Methods

कुछ अन्य javascript में DOM के methods हैं जिससे document के nodes को target कर सकतें हैं |

methodsdescriptionSyntax
documentसिर्फ document command लिखने से ये पूरा का पूरा document में return करेगा |Syntax: document
document.allये method भी document के सारे content return करता है | पर ये एक array बना कर return करता है |Syntax: document.all
document.headइस method से head के अंदर की सारे tags और content को fetch किया जा सकता है |Syntax: document.head
document.titledocument को जो title दीया गया है हम इस method से चेक कर सकतें हैं |Syntax: document.title
docutment.bodybody tag के अंदर जितने tags हैं उन्हें इस method से fetch कर सकतें हैं |Syntax: document.body
document.linksdocument में जितने भी anchor tags हैं उन्हें इस method से target कर सकतें हैं |Syntax: document.links
document.doctypeकिसी webpage में कोनसा html version इस्तेमाल हुआ है वो इस method से जान सकते हैं |Syntax: document.doctype
document.URLकिसी webpage की URL को जानने के लिए ये method काम आता है |Syntax: document.URL
document.domainकिसी webpage की domain को जानने के लिए इस method का उपयोग होता है | Syntax: document.domain

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