जावास्क्रिप्ट में DOM एलिमेंट में क्लास कैसे जोड़ें?

DOM एलिमेंट में क्लास जोड़ने के लिए, पहले आपको उसे querySelector, getElementById आदि का उपयोग करके ढूंढना होगा। फिर क्लास जोड़ें।

उदाहरण HTML

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p id="para">यह कुछ टेक्स्ट है</p>
  </body>
</html>

एलिमेंट ढूंढना

querySelector (आधुनिक, लचीला)

let myPara = document.querySelector('#para');

getElementById (तेज, केवल ID के लिए)

let myPara = document.getElementById('para');

क्लास जोड़ना

// सिंगल क्लास
myPara.classList.add('myClass');

// मल्टीपल क्लासेस
myPara.classList.add('class1', 'class2', 'class3');

// कंडीशनल
myPara.classList.toggle('active'); // टॉगल
myPara.classList.replace('old', 'new'); // रिप्लेस

classList के अन्य उपयोगी मेथड्स

myPara.classList.remove('myClass');      // हटाएं
myPara.classList.contains('myClass');    // चेक करें (true/false)
myPara.classList.toggle('hidden');       // टॉगल
myPara.classList.replace('old', 'new');  // रिप्लेस

पुराना तरीका (नहीं अनुशंसित):

// स्पेस-सेपरेटेड स्ट्रिंग मैनिपुलेशन - एरर-प्रोन
element.className += ' newClass';

सर्वोत्तम अभ्यास: हमेशा classList API का उपयोग करें - यह सुरक्षित, पठनीय और कुशल है।