जावास्क्रिप्ट-फ़ंक्शन में getElementsByClassName का उपयोग कैसे करें?

Question

मैं जावास्क्रिप्ट में एकाधिक आईडी का उपयोग करने का तरीका समझ नहीं सकता। एकल आईडी और getElementById के साथ कोई समस्या नहीं है, लेकिन जैसे ही मैं कक्षा में आईडी बदलता हूं और getElementsByClassName का उपयोग करने का प्रयास करता हूं, फ़ंक्शन काम करना बंद कर देता है। मैंने इस विषय के बारे में 100 पदों को पढ़ा है; अभी भी जवाब मिला है, इसलिए मुझे उम्मीद है कि यहां कोई व्यक्ति जानता है कि GetElementsByClassName काम कैसे करें।

यहाँ कुछ सरल कोड है कि मैं परीक्षण के लिए इस्तेमाल किया है:

function change(){ 
    document.getElementById('box_one').style.backgroundColor = "blue"; 
} 

function change_boxes(){ 
    document.getElementsByClassName ('boxes').style.backgroundColor = "green"; 
} 


<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" /> 

<div id="box_one"></div> 
<div class="boxes" ></div> 
<div class="boxes" ></div> 

Answer 1

getElementsByClassName() रिटर्न एक nodeListHTMLCollection *। आप सीधे परिणाम पर काम करने की कोशिश कर रहे हैं; आपको परिणामों के माध्यम से फिर से प्रयास करने की जरूरत है।

function change_boxes() { 
    var boxes = document.getElementsByClassName('boxes'), 
     i = boxes.length; 

    while(i--) { 
     boxes[i].style.backgroundColor = "green"; 
    } 
} 

---

* इंटरफ़ेस में परिवर्तन के साथ अपडेट

Answer 2

getElementsByClassName तत्वों सब किसी वर्ग नाम है जो का एक सेट देता है

var elements = document.getElementsByClassName('boxes'); 
for(var i=0, l=elements.length; i<l; i++){ 
elements[i].style.backgroundColor = "green"; 
} 

Answer 3

getElementsByClassName की सूची लौटाता है तत्वों को तो आप उनके माध्यम से फिर से शुरू करने और सेट करने की आवश्यकता होगी प्रत्येक आइटम पर शैलियों को एक-एक करके। तत्वों की ** नाम से पता चलता

$(".boxes").css("backgroundColor", "green");