HTML DOM getElementsByClassName() मेथड

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

सिंटैक्स

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

document.getElementsByClassName(classname)

यहां, classname स्ट्रिंग प्रकार का है जो आपके द्वारा एक्सेस किए जाने वाले तत्व के क्लास नाम को इंगित करता है। स्पेस से अलग करके कई क्लास नाम भी खोजे जा सकते हैं।

उदाहरण

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

<!DOCTYPE html> <html> <head> 
<script> 
  function changePara() { 
    var p = document.getElementsByClassName("PARA1"); 
    p[0].innerHTML = "यह टेक्स्ट बदल दिया गया है"; 
    p[1].style.color = "red"; 
    p[1].style.backgroundColor = "yellow"; 
  } 
</script> </head> <body> 
<h1>getElementsByClassName() उदाहरण</h1> 
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
<p class="PARA1"> 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 getElementsByClassName() मेथड

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

HTML DOM getElementsByClassName() मेथड

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

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

हमने दो पैराग्राफ बनाए जिनसे classname="PARA1" जुड़ा हुआ है:

<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
<p class="PARA1"> 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 ऑब्जेक्ट पर getElementsByClassName() मेथड का उपयोग करके दोनों <p> तत्वों को nodeListObject के रूप में प्राप्त करता है और इसे वेरिएबल p में असाइन करता है। इंडेक्स नंबर का उपयोग करके हम पहले पैराग्राफ के लिए टेक्स्ट बदलते हैं और दूसरे पैराग्राफ पर कुछ स्टाइलिंग लागू करते हैं:

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