HTML DOM getElementById () विधि का उपयोग इस फ़ंक्शन के पैरामीटर के रूप में एक आईडी पास करके किसी तत्व को वापस करने के लिए किया जाता है। तत्वों को बाद में हेरफेर करने के लिए यह सबसे अधिक इस्तेमाल किया जाने वाला और आसान तरीका है। यदि निर्दिष्ट आईडी मौजूद नहीं है, तो यह 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() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
चेंज बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने सबसे पहले "LINK1" आईडी और href विशेषता मान "https://www.google.com" के साथ एक एंकर तत्व बनाया है।
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
इसके बाद हमने एक बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर चेंजलिंक () को निष्पादित करेगा -
<button onclick="changeLink()">CHANGE</button>
चेंजलिंक () विधि दस्तावेज़ ऑब्जेक्ट getElementById () विधि का उपयोग करके तत्व प्राप्त करती है और तत्व आईडी को पैरामीटर के रूप में पास करती है। यह तब उस तत्व को लौटाता है जिसे हम वेरिएबल l को असाइन करते हैं। वैश्विक शैली विशेषता का उपयोग करके हम एंकर टैग के लिए रंग और फ़ॉन्ट आकार गुण मान सेट करते हैं -
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}