HTML DOM getElementsByClassName () विधि का उपयोग किसी दिए गए वर्ग नाम वाले दस्तावेज़ में सभी तत्वों का संग्रह प्राप्त करने के लिए किया जाता है। यह सभी दिए गए तत्वों को NodeList ऑब्जेक्ट के रूप में लौटाता है। आप इंडेक्स नंबर का उपयोग करके लौटाई गई वस्तु में किसी भी तत्व तक पहुंच सकते हैं। इस विधि को किसी भी व्यक्तिगत तत्व पर कहा जा सकता है कि उसके वंशज बाल तत्व दिए गए वर्ग नाम वाले हों।
सिंटैक्स
getElementsByClassName() विधि के लिए सिंटैक्स निम्नलिखित है -
document.getElementsByClassName(classname)
यहां, क्लासनाम टाइप स्ट्रिंग का है जो उस तत्व के वर्ग नाम को दर्शाता है जिसे आप एक्सेस करना चाहते हैं। एकाधिक वर्ग नामों को स्थान से अलग करके भी खोजा जा सकता है।
उदाहरण
आइए getElementsByClassName() विधि के एक उदाहरण को देखें -
<!DOCTYPE html>
<html>
<head>
<script>
function changePara() {
var p = document.getElementsByClassName("PARA1");
p[0].innerHTML = "This text has been changed";
p[1].style.color = "red";
p[1].style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<h1>getElementsByClassName() example</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> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
चेंज बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने दो पैराग्राफ बनाए हैं जिनके साथ 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>
फिर हमने एक बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर चेंजपारा () को निष्पादित करेगा -
<button onclick="changePara()">CHANGE</button>
चेंजपारा () विधि दस्तावेज़ ऑब्जेक्ट पर getElementsByClassName () विधि का उपयोग करके दोनों
तत्वों को नोडलिस्टऑब्जेक्ट के रूप में प्राप्त करती है और इसे वेरिएबल पी को असाइन करती है। इंडेक्स नंबरों का उपयोग करके हम पहले पैराग्राफ के लिए टेक्स्ट बदलते हैं और दूसरे पैराग्राफ में कुछ स्टाइल लागू करते हैं -
function changePara() {
var p = document.getElementsByClassName("PARA1");
p[0].innerHTML = "This text has been changed";
p[1].style.color = "red";
p[1].style.backgroundColor = "yellow";
}