HTML DOM getElementsByTagName() मेथड

HTML DOM getElementsByTagName() मेथड का उपयोग दस्तावेज़ में दिए गए टैग नाम वाले सभी तत्वों का संग्रह प्राप्त करने के लिए किया जाता है। यह सभी दिए गए तत्वों को NodeList ऑब्जेक्ट के रूप में लौटाता है। आप इंडेक्स नंबर का उपयोग करके लौटाए गए ऑब्जेक्ट में किसी भी तत्व को एक्सेस कर सकते हैं।

लौटाया गया HTMLCollection DOM ट्री के साथ सिंक में रहता है, बिना getElementsByTagName() मेथड को बार-बार कॉल किए, कुछ तत्वों को हटाने या जोड़ने के बाद।

सिंटैक्स

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

element.getElementsByTagName(tagname)

यहां, tagname एक अनिवार्य पैरामीटर मान है जो उन चाइल्ड तत्वों के टैगनाम को इंगित करता है जिन्हें हम प्राप्त करना चाहते हैं।

उदाहरण

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

<!DOCTYPE html> <html> <head> 
<script> 
  function changePara() { 
    var p = document.getElementsByTagName("P"); 
    p[0].innerHTML = "यह टेक्स्ट बदल दिया गया है"; 
    p[1].style.color = "red"; 
    p[1].style.backgroundColor = "yellow"; 
  } 
</script> </head> <body> 
<h1>getElementsByTagName() उदाहरण</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p> 
<button onclick="changePara()">CHANGE</button> 
</body> </html>

आउटपुट

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

HTML DOM getElementsByTagName() मेथड

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

HTML DOM getElementsByTagName() मेथड

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

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

हमने दो पैराग्राफ बनाए जिनसे कोई attribute जुड़ा नहीं है:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

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

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

changePara() मेथड document ऑब्जेक्ट पर getElementsByTagName() मेथड का उपयोग करके दोनों <p> तत्वों को nodeListObject के रूप में प्राप्त करता है और इसे वेरिएबल p में असाइन करता है। इंडेक्स नंबर का उपयोग करके हम पहले पैराग्राफ के लिए टेक्स्ट बदलते हैं और दूसरे पैराग्राफ पर कुछ स्टाइलिंग लागू करते हैं:

function changePara() { 
  var p = document.getElementsByTagName("P"); 
  p[0].innerHTML = "यह टेक्स्ट बदल दिया गया है"; 
  p[1].style.color = "red"; 
  p[1].style.backgroundColor = "yellow"; 
}