HTML DOM getElementById() मेथड

HTML DOM getElementById() मेथड का उपयोग किसी तत्व को id को पैरामीटर के रूप में इस फंक्शन में पास करके लौटाने के लिए किया जाता है। यह बाद में मैनिपुलेट करने के लिए तत्वों को प्राप्त करने के लिए सबसे अधिक उपयोग किए जाने वाले और आसान मेथड्स में से एक है। यदि निर्दिष्ट Id मौजूद नहीं है, तो यह NULL लौटाता है।

सिंटैक्स

getElementById() मेथड के लिए सिंटैक्स:

document.getElementById(elementID)

उदाहरण

आइए getElementById() मेथड का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> 
<script> 
  function changeLink() { 
    var l = document.getElementById("LINK1"); 
    l.style.color = "red"; 
    l.style.fontSize="40px"; 
  } 
</script> </head> <body> 
<h1>getElementById() उदाहरण</h1> 
<a id="LINK1" href="https://www.google.com">GOOGLE</a> 
<p>ऊपर दिए गए लिंक पर स्टाइलिंग लागू करने के लिए नीचे दिए गए बटन पर क्लिक करें</p> 
<button onclick="changeLink()">CHANGE</button> 
</body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

HTML DOM getElementById() मेथड

CHANGE बटन पर क्लिक करने पर:

HTML DOM getElementById() मेथड

उदाहरण की व्याख्या

उपरोक्त उदाहरण में:

हमने पहले id "LINK1" और href attribute मान "https://www.google.com" के साथ एक एंकर तत्व बनाया:

<a id="LINK1" href="https://www.google.com">GOOGLE</a>

फिर हमने एक बटन CHANGE बनाया जो यूज़र द्वारा क्लिक किए जाने पर changeLink() को एक्ज़िक्यूट करता है:

<button onclick="changeLink()">CHANGE</button>

changeLink() मेथड document ऑब्जेक्ट के getElementById() मेथड का उपयोग करके <a> तत्व को प्राप्त करता है और <a> तत्व की id को पैरामीटर के रूप में पास करता है। यह फिर तत्व को लौटाता है जिसे हम वेरिएबल l में असाइन करते हैं। ग्लोबल style attribute का उपयोग करके हम एंकर टैग के लिए color और fontSize प्रॉपर्टी मान सेट करते हैं:

function changeLink() { 
  var l = document.getElementById("LINK1"); 
  l.style.color = "red"; 
  l.style.fontSize="40px"; 
}